100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > css - Position定位属性与层级关系

css - Position定位属性与层级关系

时间:2022-05-05 06:33:01

相关推荐

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>

一个博主的回答:/articles/rmAzia

解释原文://03/04/postion-teach/

-04-18 15:13:12 end

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。