css - Position定位属性与层级关系
生活随笔
收集整理的這篇文章主要介紹了
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
轉載于:https://www.cnblogs.com/padding1015/p/6727957.html
總結
以上是生活随笔為你收集整理的css - Position定位属性与层级关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： expdp / impdp 用法详解（O
- 下一篇： JAVA IO修改文本内容