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> </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>
