1. 首頁 > 生活百科 > >

為什么我寫的z-index不生效？( 二 )

生活百科


為什么我寫的z-index不生效？

文章插圖
行內元素的層疊順序為什么要高于塊級元素與浮動元素這個理解起來其實很簡單，像border/background屬于裝飾元素的屬性，浮動和塊級元素一般用來頁面布局，而內聯元素一般都是文字內容，并且網頁設計之初最重要的就是文字內容，所以在發生層疊時會優先顯示文字內容 ， 保證其不被覆蓋 。
層疊順序規則
  • 誰大誰上：當具有明顯的層疊水平標示的時候 ， 比如說z-index值，在同一個層疊上下文領域，層疊水平值大的覆蓋小的
  • 后來居上：當元素的層疊水平一致、層疊順序相同的時候 ， 在DOM流中處于后面的元素會覆蓋前面的元素 。
z-index
z-index 屬性設定了一個定位元素及其后代元素或 flex 項目的 z-order 。當元素之間重疊的時候，z-index 較大的元素會覆蓋較小的元素在上層進行顯示 。
屬性值
  • auto: 默認值，當前值與父級相同
  • <integer>: 整型數字
基本特性
  1. z-index 屬性允許為負值 。
  2. z-index 屬性支持 CSS3 animation 動畫 。
  3. 在 CSS 2.1 的時候，需要配合 position 屬性且值不為 static 時使用 。
解惑了解完上面這些內容，現在我們再來看一看前文提到的一些問題
1.為什么我寫的z-index沒有生效？這個很簡單，因為它單獨使用時不生效，一定要配合定位屬性一起，即只對指定了position屬性的元素生效——只要不是默認值static，其他的absolute、relative、fixed都可以使z-index生效 。(在CSS3之后，彈性元素的子元素也可以生效)
2.為什么z-index大的元素卻沒有蓋住z-index小的元素？這里我們可以來看一個有趣的現象
<style>  .box1 {    width: 200px;    height: 100px;    background: red;}  .box2 {    width: 100px;    height: 200px;    background: greenyellow;}</style><div style="position:relative; z-index:auto;">  <div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div></div>?<div style="position:relative; z-index:auto;">  <div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div></div>
為什么我寫的z-index不生效？

文章插圖
這么看還挺正常的，z-index值大的在z-index值小的上方 。接下來我們稍微改一改 ， 你就能看到奇怪的現象了
<div style="position:relative; z-index:0;">  <div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div></div>?<div style="position:relative; z-index:0;">  <div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div></div>
為什么我寫的z-index不生效？

文章插圖
這里我們只是把它們父元素的z-index屬性從auto改成了0 ， 兩種情況的表現卻截然相反 。
產生這種現象的原因我們也能夠從上面的理論中找到答案：position屬性為非 static值并設置z-index屬性為具體數值才能產生層疊上下文
當z-index為auto時 ， 是一個普通元素，兩個box層比較不受父級的影響，按照規則誰大誰上 ， 于是z-index為2的box覆蓋值為1的box； 當z-index為0時，會創建一個層疊上下文，此時的層疊規則就發生了變化 。層疊上下文特性里最后一條規則 ， 每個層疊上下文都是獨立的 。兩個box的層疊順序比較變成了優先比較其父級層疊上下文元素的層疊順序 。由于兩者z-index都是0，所以，遵循層疊規則后來居上，根據在DOM出現的先后順序決定誰在上面，于是 ， 位于后面的box2覆蓋box1 。此時box元素上的z-index是沒有任何意義的 。
3.如何讓父元素蓋住子元素？這里很多人是不是認為直接讓父元素的z-index大于子元素的z-index不就好了，可事實真是如此嗎？
<style>.outer {    position: relative;    width: 100px;    height: 200px;    background: salmon;    z-index: 3;}  .inner {    position: relative;    width: 50px;    height: 200px;    background: cadetblue;    z-index: 1;}</style><div class="outer">父元素  <div class="inner">子元素</div></div>

推薦閱讀