欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中的z-index屬性基本使用教程

圖靈社區(qū)   發(fā)布時間：2016-03-05 11:55:44   作者：doyoe   我要評論
這篇文章主要介紹了CSS中的z-index屬性基本使用教程,z-index主要用來控制層疊級別,注意IE瀏覽器下的效果可能會有點特殊...需要的朋友可以參考下

z-index語法和應(yīng)用

CSS Code復(fù)制內(nèi)容到剪貼板
  1. z-index: auto | <integer>  

z-index 接受的屬性值為：關(guān)鍵字auto和整數(shù)，整數(shù)可以是負(fù)值（Firefox2.0及之前不支持負(fù)值）。

需要注意的是 z-index 雖然很給力，卻只能應(yīng)用于定位元素（即設(shè)置了 position 屬性為非 static 值），其它情況下，z-index 將被忽略。

對于定位元素而言，z-index 意味著：

確定該元素在當(dāng)前層疊上下文中的層疊級別。
確定該元素是否創(chuàng)建了一個新的局部層疊上下文。


創(chuàng)建層疊上下文

在規(guī)范中說明：當(dāng)某個元素的 z-index 未顯式定義或者被指定為 auto 時，該元素不會產(chǎn)生新的局部層疊上下文。也就是說它可以和兄弟，祖先，后輩元素處在同一個堆疊上下文中，它們被放在一起比較層疊級別，兒子可以蓋住祖先，父親也可以蓋住兒子，兒子甚至可以越過祖先，蓋住祖先的兄弟，在層疊上下文中，它們是并級的關(guān)系。來看這樣一個例子 DEMO1: z-index與創(chuàng)建層疊上下文

值得高興的是，大部分瀏覽器都實現(xiàn)了這個特性；不過在IE6/7下，不論 z-index 值是否被顯式定義，都將產(chǎn)生新的局部層疊上下文，也就是說子元素不可以越過是定位元素的父親，子元素都處在新創(chuàng)建的局部層疊上下文中，只能在內(nèi)部進行層疊級別的比較。

深入淺出

某區(qū)域內(nèi)有個浮層提示或者下拉菜單，于是可能需要遮住該區(qū)域之下的區(qū)域。

HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="a">  
  2.     ...   
  3.     <div class="tips">我是一個簡陋的浮層提示</div>  
  4. </div>  
  5. <div class="b">  
  6.     ...   
  7. </div>  

CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .a{position:relative;}   
  2. .tips{position:absolute;z-index:99;}  

如上HTML/CSS代碼，很顯然，浮層 tips 將可以覆蓋在其父級元素 a 的兄弟元素 b 之上。

于是你的意圖得到實現(xiàn)，效果如下圖：
201635115051330.png (294×116)

不過很顯然，你依然無法準(zhǔn)確的判斷出在各瀏覽器下，tips 能蓋住 b 是因為其父級的定位還是本身的定位。

但是我們可以做這樣一個測試，我們讓 b 也擁有定位，Code如下：

CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .a{position:relative;}   
  2. .tips{position:absolute;z-index:99;}   
  3. .b{position:relative;}  

這段代碼run完之后，就比較糾結(jié)了，你能得到的效果將會如下：
201635115132931.png (600×140)

首先，我們來解讀一下這個例子：因為 a 和 b 都是 relative 且沒有定義 z-index （等同于z-index:auto），根據(jù)后來居上的原則，此時 b 的層疊級別是要高于 a 的，意思就是說 a 是無法遮住 b 的。不過從 DEMO3 中，我們看到 a 的子元素 tips 遮住了 b，這就表示 tips 能越過它，所以可以判斷出 a 沒有創(chuàng)建新的局部層疊上下文。很明顯，這是完全吻合標(biāo)準(zhǔn)對此的定義。

不過這是在非IE6/7之下結(jié)果。在IE6/7下，我們看到 tips 并沒能遮住 b，也就是說 tips 無法越過父級，因為 a 創(chuàng)建了新的局部層疊上下文，而 a 的層疊級別又比 b 低，所以 tips 無法遮住 b，這也就是在IE6/7下常出現(xiàn)覆蓋Bug的根源。

能得出以下結(jié)論：

當(dāng)定位元素沒有顯式定義z-index值時，不會創(chuàng)建新的局部層疊上下文
子元素有可能和祖先的兄弟或者祖先兄弟的子元素處在同一個層疊上下文中
在實際工作中，有些情況可能是你沒注意或者已然存在的。比如你事先可能并不知道 b 也是定位元素，或者由于某些原因，你需要將其設(shè)置為定位元素，于是可能出現(xiàn)各種兼容問題。如果你不了解 z-index 是如何創(chuàng)建局部層疊上下文，且又沒注意到IE6/7的實現(xiàn)錯誤，那么處理起這樣的問題將會讓你深陷泥潭。

所以在實際的場景中，如果是為了相互覆蓋而設(shè)置為定位，那么顯式的定義 z-index 值，將可避免出現(xiàn)創(chuàng)建新局部層疊上下文差異。

如果需要越過祖先和其它區(qū)塊內(nèi)部元素進行相互層疊，那么考慮IE6/7的情況，也應(yīng)該盡量避免給父級元素進定位。

opacity與層疊上下文

我們知道 opacity 屬性是用來設(shè)置元素不透明度的。但可能知道 opacity 和層疊上下文有關(guān)的不多，不過沒關(guān)系，這里我們簡單聊聊這個話題，有兩點必須注意：

當(dāng)opacity值小于1時，該元素會創(chuàng)建新的局部層疊上下文，也就是說它可以和定位元素進行層疊層別比較
當(dāng)opacity值小于1時，該元素?fù)碛袑盈B級別且相當(dāng)于z-index:0或auto，但不能定義 z-index ，除非本身是定位元素
簡單來說，當(dāng)一個普通的元素定義了 opacity 的值小于1時（比如 opacity:.5），那么該元素的層疊級別將會高于普通元素，其效果類同于定位元素沒有顯式定義 z-index 的情況，唯一的區(qū)別是沒有顯式定義 z-index 的定位元素不會產(chǎn)生局部層疊上下文，而定義了 opacity 值小于1的元素會產(chǎn)生新的局部層疊上下文。

opacity猜想

假定我們有 a, b, c 三個元素，它們相互層層覆蓋在一起，如果這時將 a 元素定義為 opacity:.8，你知道結(jié)果會怎樣嗎？

HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="a">a</div>  
  2. <div class="b">b</div>  
  3. <div class="c">c</div>  

CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .a,.b,.c{width:100px;height:100px;}   
  2. .a{opacity:.8;background:#999;}   
  3. .b{margin:-70px 0 0 30px;background:#090;}   
  4. .c{margin:-70px 0 0 60px;background:#f00;}  

如果你看明白了我對于 opacity 與層疊上下文的描述，相信你可以猜到結(jié)果，是的，a 元素將會覆蓋 b 和 c 元素，雖然它在HTML文檔中出現(xiàn)在 b 和 c 之前，且不是定位元素。

必須看看具體的示例不是么？DEMO4: opacity與局部層疊上下文猜想。

如果我們將 b 和 c 設(shè)置為定位元素，又將會如何呢？

CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .a,.b,.c{width:100px;height:100px;}   
  2. .a{opacity:.8;background:#999;}   
  3. .b{position:relative;margin:-70px 0 0 30px;background:#090;}   
  4. .c{position:relative;margin:-70px 0 0 60px;background:#f00;}  

不急，我們可以接著看示例 DEMO5: opacity與局部層疊上下文猜想2。

當(dāng)一個普通元素定義了 opacity 為小于1的值時，該元素將像定位元素一樣擁有層疊級別，可以覆蓋普通元素，并且其層疊級別與未顯式定義 z-index 的定位元素一樣。

opacity創(chuàng)建局部層疊上下文

與未顯式定義 z-index 的定位元素唯一不同的是 opacity 值小于1的元素會創(chuàng)建局部層疊上下文。

創(chuàng)建局部層疊上下文意味著什么，前文我們已經(jīng)詳述過。所以不再贅述，這里只給一個示例用以驗證該特性。先奉上代碼：

HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="a">a   
  2.     <div class="d">d</div>  
  3. </div>  
  4. <div class="b">b</div>  
  5. <div class="c">c</div>  

CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .a,.b,.c,.d{width:100px;height:100px;}   
  2. .a{opacity:.8;background:#999;}   
  3. .b{position:relative;margin:-70px 0 0 30px;background:#090;}   
  4. .c{position:relative;margin:-70px 0 0 60px;background:#f00;}   
  5. .d{position:absolute;z-index:99;height:50px;background:#090;}  

你會發(fā)現(xiàn)雖然 a 的子元素 d 將 z-index 定義為99，但 d 仍然無法遮住 b 和 c 元素，這是因為 a 創(chuàng)建了新的局部層疊上下文，d 元素?zé)o法超越父級。

需要注意的是，此時就算 a 元素變成了定位元素，也不能改變其會創(chuàng)建新局部層疊上下文的命運，因為他設(shè)置了 opacity:.8。

按照我們前文所說，如果 a 沒有定義 opacity:.8 ，但卻像 b 和 c 元素一樣設(shè)置了 relative，那么其子元素 d 將可以覆蓋 b 和 c，至于這個例子就不再奉上了，大家隨便寫個測試一下即可。


相關(guān)文章

  • 深入理解css中position屬性及z-index屬性(推薦)

    這篇文章主要介紹了深入理解css中position屬性及z-index屬性(推薦)，想要學(xué)習(xí)了解CSS樣式的同學(xué)，可以了解一下。希望對大家的學(xué)習(xí)有所幫助。
    2016-11-29

  • 深入解析CSS中z-index屬性對層疊順序的處理

    這篇文章主要介紹了CSS中z-index屬性對層疊順序的處理,分情況講解了各種曾跌情況下哪個box更靠近用戶,需要的朋友可以參考下
    2016-03-05

  • CSS教程 徹底掌握Z-index屬性

    在這篇文章里，我們會準(zhǔn)確的說明究竟什么是Z-index，它為什么會這么不為人所了解，并一起討論一些關(guān)于它的實際使用中的問題
    2014-11-04

  • CSS屬性探秘系列(七)：z-index

    在這篇文章里，我們會準(zhǔn)確的說明究竟什么是Z-index，它為什么會這么不為人所了解，并一起討論一些關(guān)于它的實際使用中的問題。我們同時會描述一些會遇到的瀏覽器間的差異，
    2014-10-22

  • CSS 中的 z-index 屬性實例詳解

    z-index屬性是用來設(shè)置元素的堆疊順序或者叫做元素層級，z-index的值越大，元素的層級越高，本文給大家講解CSS 中的 z-index 屬性實例代碼，感興趣的朋友跟隨小編一起看看
    2023-05-29

最新評論