css - Position定位属性与层级关系
生活随笔
收集整理的這篇文章主要介紹了
css - Position定位属性与层级关系
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
今天同事發(fā)現(xiàn)一個(gè)有意思的問(wèn)題，關(guān)于position的層級(jí)關(guān)系的，他要不說(shuō)我也沒(méi)注意過(guò)
測(cè)試后果然有趣，有待深入研究：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位屬性與層級(jí)關(guān)系</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 層級(jí)關(guān)系 27 <br /> 28 29 首先是遵循DOM的規(guī)則，同級(jí)的后面居上。<br /> 30 31 一般有定位屬性的元素會(huì)高于無(wú)定位屬性的同級(jí)元素。<br /> 32 33 都有定位屬性的同級(jí)元素，z-index大者居上<br /> 34 35 如果是非同級(jí)的元素， 則會(huì)忽略元素本身z-index，取與對(duì)比元素同級(jí)的祖先元素的z-index屬性，大者居上<br /> 36 </p> 37 </div> 38 </body> 39 </html>?
一個(gè)博主的回答：http://www.tuicool.com/articles/rmAzia
解釋原文：http://www.elanblog.com/2014/03/04/postion-teach/
2017-04-18? 15:13:12 end
轉(zhuǎn)載于:https://www.cnblogs.com/padding1015/p/6727957.html
總結(jié)
以上是生活随笔為你收集整理的css - Position定位属性与层级关系的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： expdp / impdp 用法详解（O
- 下一篇： JAVA IO修改文本内容