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 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读