站长资源网页制作
z-index ie6下的解决方案
简介XML/HTML Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <!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 {
- height:70px;
- 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;
- height:40px;
- }
- .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>