天天看點

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

繼續閱讀