首页 > 代码库 > Css中Position定位属性与层级关系

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

Css中Position定位属性与层级关系