z-index ie6下的解决方案

时间：2021-05-08

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<metaname="author"content="Chomo"/>

<linkrel="start"href="http://www.14px.com"title="Home"/>

<title>法则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</title>

</head>

<styletype="text/css">

div{font:12px/1.5arial;}

divstrong{color:#fff;background:#036;display:inline-block;}

h3strong{color:#f00;}

.div1,

.div2{

height:70px;

width:150px;

background:#cff;

border:1pxsolid#036;

}

.grandDiv1,

.grandDiv2{

padding:10px;

border:1pxsolid#060;

width:174px;

background:#cf9;

}

.parentDiv1,

.parentDiv2{

padding:10px;

border:1pxsolid#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;

height:40px;

}

.grandDiv2.parentDiv2,

.grandDiv2.div2,

.parentDiv2.div2{margin:0;}

</style>

<body>

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

<p>情况1：子元素的z-index无论多大，父元素大者居上。<p>

<divclass="parentDiv1"style="position:relative;z-index:2;">

.parentDiv1{position:relative;<strong>z-index:2</strong>}

<divclass="div1">.div1{position:static}</div>

</div>

<divclass="parentDiv2"style="position:relative;z-index:1;">

<divclass="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>

<divclass="parentDiv1">

.parentDiv1{position:staitc}

<divclass="div1"style="position:relative;">.div1{position:relative}</div>

</div>

<divclass="parentDiv2">

<divclass="div2">.div2{position:staitc}</div>

.parentDiv2{position:staitc}

</div>

<p>情况1、情况2结合扩展比较。<p>

<divclass="grandDiv1"style="position:relative;z-index:3;">

.grandDiv1{position:relative;<strong>z-index:3</strong>}

<divclass="parentDiv1">

.parentDiv1{position:staitc}

<divclass="div1"style="position:relative;z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div>

</div>

<divclass="grandDiv2">

<divclass="parentDiv2"style="position:relative;z-index:4;">

<divclass="div2">.div2{position:staitc}</div>

.parentDiv2{position:relative;<strong>z-index:4</strong>}

</div>

.grandDiv2{position:static;}

</div>

</body>

</html>

z-index ie6下的解决方案

相关文章

SELECT在浏览器中相关Bug整理

ie6 select无法被div遮盖的bug解决方法

bgiframe插件解决IE6 DIV档不住下拉选择框

链接伪类（:hover）CSS背景图片有闪动BUG的解决方法

网页中flash wmode属性你会用吗？