css - Position定位属性与层级关系

时间：2023-12-04 12:42:50

今天同事发现一个有意思的问题，关于position的层级关系的，他要不说我也没注意过

测试后果然有趣，有待深入研究：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Css中Position定位属性与层级关系</title>

         <style type="text/css">

             #W{

                 position: relative;

             }

             .a{position: absolute;}

             #addTR{position: relative;width: 200px;height: 30px;background: seagreen;}

         </style>

     </head>

     <body>

         <div id="w">

             <div id="addTR">

                 <p>文字</p>

             </div>

             <div class="a">

                 <img src="img/1.jpg"/>

             </div>

             <div class="a">

                 <img src="img/2.jpg"/>

             </div>

             <p style="margin-top: 500px;">

                  层级关系

                  <br />

 首先是遵循DOM的规则，同级的后面居上。<br />

 一般有定位属性的元素会高于无定位属性的同级元素。<br />

 都有定位属性的同级元素，z-index大者居上<br />

 如果是非同级的元素， 则会忽略元素本身z-index，取与对比元素同级的祖先元素的z-index属性，大者居上<br />

             </p>

         </div>

     </body>

 </html>

一个博主的回答：http://www.tuicool.com/articles/rmAzia

解释原文：http://www.elanblog.com/2014/03/04/postion-teach/

2017-04-18  15:13:12 end

相关文章