今天同事发现一个有意思的问题,关于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>
一个博主的回答:/articles/rmAzia
解释原文://03/04/postion-teach/
-04-18 15:13:12 end