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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Css中Position定位属性与层级关系</title>
 6         <style type="text/css">
 7             #W{
 8                 position: relative;
 9             }
10             .a{position: absolute;}
11             #addTR{position: relative;width: 200px;height: 30px;background: seagreen;}
12         </style>
13     </head>
14     <body>
15         <div id="w">
16             <div id="addTR">
17                 <p>文字</p>
18             </div>
19             <div class="a">
20                 <img src="img/1.jpg"/>
21             </div>
22             <div class="a">
23                 <img src="img/2.jpg"/>
24             </div>
25             <p style="margin-top: 500px;">
26                  层级关系
27                  <br />
28 
29 首先是遵循DOM的规则，同级的后面居上。<br />
30 
31 一般有定位属性的元素会高于无定位属性的同级元素。<br />
32 
33 都有定位属性的同级元素，z-index大者居上<br />
34 
35 如果是非同级的元素， 则会忽略元素本身z-index，取与对比元素同级的祖先元素的z-index属性，大者居上<br /> 
36             </p>
37         </div>
38     </body>
39 </html>

 

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

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

2017-04-18  15:13:12 end

posted @ 2017-04-18 15:13  xing.org1^  阅读(2955)  评论(0)  编辑  收藏  举报