今天同僚發現一個有意思的問題,關于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