z-index ie6下的解决方案

时间：2010-08-23 来源：qgd87

非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。

代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Chomo" />
        <link rel="start" href="http://www.14px.com" title="Home" />
        <title>法则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</title>
    </head>
    <style type="text/css">
        div { font:12px/1.5 arial;}
        div strong { color:#fff; background:#036; display:inline-block;}
        h3 strong { color:#f00;}
        /*--- 定义方块外形 ---*/
        .div1,
        .div2 {

            width:150px;
            background:#cff;
            border:1px solid #036;
        }
        .grandDiv1,
        .grandDiv2 {
            padding:10px;
            border:1px solid #060;
            width:174px;
            background:#cf9;
        }
        .parentDiv1,
        .parentDiv2 {
            padding:10px;
            border:1px solid #f06;
            width:152px;
            background:#fcf;
        }
        /*--- 定义方块偏移位置、文字位置 ---*/
        .grandDiv2 {
            margin-top:-50px;
            margin-left:95px;
        }
        .parentDiv2 {
            margin-top:-40px;
            margin-left:85px;
        }
        .div2 {
            margin-top:-20px;
            margin-left:75px;
            padding-top:30px;

        }
        .grandDiv2 .parentDiv2,
        .grandDiv2 .div2,
        .parentDiv2 .div2 { margin:0;}
    </style>
    <body>
        <h3>法则五<strong>（重要）</strong>：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</h3>
        <p>情况1：子元素的z-index无论多大，父元素大者居上。<p>
            <div class="parentDiv1" style="position:relative; z-index:2;">
                .parentDiv1{position:relative;<strong>z-index:2</strong>}
                <div class="div1">.div1{position:static}</div>
            </div>
            <div class="parentDiv2" style="position:relative; z-index:1;">
                <div class="div2" style="position:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div>
                .parentDiv2{position:relative;<strong>z-index:1</strong>}
            </div>
        <p>情况2：父元素居下，子元素也可以居上。<p>
        <div class="parentDiv1">
            .parentDiv1{position:staitc}
            <div class="div1" style="position:relative;">.div1{position:relative}</div>
        </div>
        <div class="parentDiv2">
            <div class="div2">.div2{position:staitc}</div>
            .parentDiv2{position:staitc}
        </div>
        <p>情况1、情况2结合扩展比较。<p>
        <div class="grandDiv1" style="position:relative; z-index:3;">
            .grandDiv1{position:relative;<strong>z-index:3</strong>}
            <div class="parentDiv1">
                .parentDiv1{position:staitc}
                <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div>
            </div>
        </div>
        <div class="grandDiv2">
            <div class="parentDiv2" style="position:relative; z-index:4;">
                <div class="div2">.div2{position:staitc}</div>
                .parentDiv2{position:relative;<strong>z-index:4</strong>}
            </div>
            .grandDiv2{position:static;}
        </div>
    </body>
</html>