今天同事发现一个有意思的问题，关于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