小編給大家分享一下css中z-index的案例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:主機(jī)域名、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、秦皇島網(wǎng)站維護(hù)、網(wǎng)站推廣。做過頁面布局的同學(xué)對(duì)z-index屬性應(yīng)該是很熟悉了,z-index是針對(duì)網(wǎng)頁顯示中的一個(gè)特殊屬性。因?yàn)轱@示器是顯示的圖案是一個(gè)二維平面,擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區(qū)別。表示一個(gè)元素在疊加順序上的上下立體關(guān)系。
z-index值較大的元素將疊加在z-index值較小的元素之上。對(duì)于未指定此屬性的定位對(duì)象,z-index 值為正數(shù)的對(duì)象會(huì)在其之上,而 z-index 值為負(fù)數(shù)的對(duì)象在其之下。
<div style="width:200px;height:200px;background-color:#0e0;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>
兩個(gè)p,第二個(gè)向上移動(dòng)50px,正常情況應(yīng)該是這樣的
第二個(gè)p遮住了第一個(gè)p,對(duì)第二個(gè)添加z-index屬性
<div style="width:200px;height:200px;background-color:#0e0;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;z-index:-5;"><div>
結(jié)果就會(huì)變成這個(gè)樣子,z-index 最簡(jiǎn)單的應(yīng)用就是這樣
z-index屬性適用于定位元素(position屬性值為 relative 或 absolute 或 fixed的對(duì)象),用來確定定位元素在垂直于顯示屏方向(稱為Z軸)上的層疊順序,也就是說如果元素是沒有定位的,對(duì)其設(shè)置的z-index會(huì)是無效的。
<div style="width:200px;height:200px;background-color:#0e0;z-index:30"></div> <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;z-index:10;"><div>
雖然第一個(gè)p的z-index比第二個(gè)p大,但是由于第一個(gè)p未定位,其z-index屬性未起作用,所以仍然會(huì)被第二個(gè)p覆蓋。
相同的z-index其實(shí)有兩種情況
1.如果兩個(gè)元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個(gè)都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象,那么按文檔流順序,后面的覆蓋前面的。
<div style="position:relative;width:200px;height:200px;background-color:#0e0;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>
2.如果兩個(gè)元素都沒有設(shè)置z-index,使用默認(rèn)值,一個(gè)定位一個(gè)沒有定位,那么定位元素覆蓋未定位元素
<div style="position:relative;top:50px;width:200px;height:200px;background-color:#0e0;"></div> <div style=" width:100px;height:100px;background-color:#00e;"><div>
如果父元素z-index有效,那么子元素?zé)o論是否設(shè)置z-index都和父元素一致,會(huì)在父元素上方
<div style="position:relative;width:200px;height:200px;background-color:#0e0;z-index:10;"> <div style="position:relative;width:100px;height:100px;background-color:#00e;z-index:-5;"><div> </div>
雖然子元素設(shè)置z-index比父元素小,但是子元素仍然出現(xiàn)在父元素上方
如果父元素z-index失效(未定位或者使用默認(rèn)值),那么定位子元素的z-index設(shè)置生效
<div style="position:relative;width:200px;height:200px;background-color:#0e0;"> <div style="position:relative;width:100px;height:100px;background-color:#00e;z-index:-5;"><div> </div>
子元素z-index=-5生效,被父元素覆蓋
如果兄弟元素的z-index生效,那么其子元素覆蓋關(guān)系有父元素決定
<div style="position:relative;width:100px;height:100px;background-color:#0e0;z-index:5;"> <div style="position:relative;width:50px;height:250px;background-color:#00e;z-index:50;"></div> </div> <div style="position:relative;width:100px;height:100px;background-color:#0e0;z-index:10;margin-top:4px;"> <div style="position:relative;width:30px;height:150px;background-color:#e0e;z-index:-10;"></div> </div>
雖然第一個(gè)p的子元素的z-index比較高,但是由于其父元素z-index比第二個(gè)p低,所以第一個(gè)p子元素會(huì)被第二個(gè)p及其子元素覆蓋
經(jīng)常會(huì)有這樣一種錯(cuò)誤在table中最后各行一個(gè)td放一個(gè)p,點(diǎn)擊彈出子菜單做一些刪除、修改什么的操作,但是每次彈出的菜單都會(huì)被下面各行的p覆蓋,像下面這張圖一樣,彈出的菜單沒有在頁面最上方。
寫個(gè)簡(jiǎn)單的例子看看
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css" > html,body { height:100%; width:100%; padding:0; margin:0; } .menu { background-color:#0e0; position:relative; z-index:10; } .options { display:none; position:absolute; top: z-index:30; } .options div { background-color:#00e; } </style> </head> <body> <table border="1" cellpadding="4px" cellspacing="0"> <tr> <th>Name</th> <th>Age</th> <th>Options</th> </tr> <tr> <td>Byron</td> <td>24</td> <td> <div class="menu" > <div>Options</div> <div class="options" style="display:block;position:absolute;top:20px;"> <div>Opion1</div> <div>Opion2</div> <div>Opion3</div> <div>Opion4</div> </div> </div> </td> </tr> <tr> <td>Byron</td> <td>24</td> <td> <div class="menu"> <div>Options</div> <div class="options" > <div>Opion1</div> <div>Opion2</div> <div>Opion3</div> <div>Opion4</div> </div> </div> </td> </tr> <tr> <td>Byron</td> <td>24</td> <td> <div class="menu"> <div>Options</div> <div class="options" > <div>Opion1</div> <div>Opion2</div> <div>Opion3</div> <div>Opion4</div> </div> </div> </td> </tr> </table> </body> <html>
期望樣式 | 實(shí)際樣式 |
這時(shí)候習(xí)慣于增大options 的z-index卻發(fā)現(xiàn)于事無補(bǔ),為什么呢?因?yàn)槊總€(gè)menu的z-index相同,它們的層疊順序按文檔流順序,無論子元素z-index調(diào)到多大,上面menu的options還是會(huì)被下面menu遮蓋。這時(shí)候我的做法一般是把options放到外面,所有的menu用一個(gè),使menu與options沒有父子關(guān)系,或者干脆在點(diǎn)擊menu的時(shí)候把它的z-index調(diào)大,這樣其子元素就不會(huì)被遮蓋住了。
本文的例子都是以符合W3C的Chrome瀏覽器做驗(yàn)證,但在IE6,7 z-index的默認(rèn)值并不是auto而是0,這樣會(huì)導(dǎo)致很多奇怪現(xiàn)象,這時(shí)候就需要考慮這點(diǎn)了。
以上是css中z-index的案例分析的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享文章:css中z-index的案例分析-創(chuàng)新互聯(lián)
瀏覽地址:http://muchs.cn/article28/csgjcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、企業(yè)建站、定制開發(fā)、網(wǎng)站維護(hù)、云服務(wù)器、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容