1. 首頁 > 生活百科 > >

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

生活百科

前言相信大家在工作中都遇到過這樣一些奇怪的問題：
1.為什么我寫的z-index沒有生效？
2.為什么z-index大的元素卻沒有蓋住z-index小的元素？
3.如何讓父元素蓋住子元素呢？
以上這些問題都跟CSS層疊上下文有關，帶著上面這些問題我們一起來了解一下什么是CSS層疊上下文，以及這些奇怪現象背后的原理！
如果這篇文章有幫助到你，?關注+點贊?鼓勵一下作者，文章公眾號首發，關注 前端南玖 第一時間獲取最新文章～
什么是CSS層疊上下文？

層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先級順序占用層疊上下文的空間 。
z軸在CSS2.1規范中，每個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸 。一般情況下 ， 元素在頁面上沿X軸Y軸平鋪，我們察覺不到它們在Z軸上的層疊關系 。而一旦元素發生堆疊，這時就能發現某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋 。
為什么我寫的z-index不生效？

文章插圖
我們可以這樣來理解：
  • 層疊上下文是HTML元素的三維概念，可以想象為一條垂直于視窗的z軸
  • 當元素創建了重疊上下文時，這個元素就有了一個z軸
  • 如果內部的子元素發生重疊，會依據自身屬性優先級順序占用z軸（重疊上下文）上的空間
  • 優先級最大的元素排在最上面，離用戶也最近
如何產生層疊上下文?了解了層疊上下文，我們還要知道層疊上下文是如何產生的 。
一般來講有3種方法：
  • html中的根元素<html></html>本身就是層疊上下文，成為根層疊上下文
  • position屬性為非static值并設置z-index屬性為具體數值
  • 一些CSS3屬性也能產生層疊上下文
    • 一個 flex 元素(flex item)，且 z-index 值不為 “auto”，也就是父元素 display: flex|inline-flex
    • 元素的 opacity 屬性值小于 1
    • 元素的 transform 屬性值不為 “none”
    • 元素的 mix-blend-mode 屬性值不為 “normal”
    • 元素的 isolation 屬性被設置為 “isolate”
    • 在 mobile WebKit 和 Chrome 22+ 內核的瀏覽器中，position: fixed 總是創建一個新的層疊上下文, 即使 z-index 的值是 “auto”
    • 在 will-change 中指定了任意 CSS 屬性，即便你沒有定義該元素的這些屬性
    • 元素的 -webkit-overflow-scrolling 屬性被設置 “touch”
層疊等級與層疊順序層疊等級
【為什么我寫的z-index不生效？】層疊等級(stacking level ， 叫“層疊級別”/“層疊水平”也行)，它決定了同一個層疊上下文中元素在z軸上的顯示順序（層疊順序）  ， 也就是說普通元素的層疊水平優先由層疊上下文決定 。
層疊順序
“層疊順序”英文稱作”stacking order”. 表示元素發生層疊時候有著特定的垂直顯示順序 ， 注意 ， 這里跟上面兩個不一樣，上面的層疊上下文和層疊水平是概念，而這里的層疊順序是規則 。
從上面產生層疊上下文的方法，我們可以分為CSS2.1與CSS3兩類，在CSS3出來之前，相信大家都看過下面這張圖：
為什么我寫的z-index不生效？

文章插圖
看到這張圖，相信大家最有疑問的是行內元素的層疊順序要高于塊級元素與浮動元素 。
OK，有疑問就動手實踐一遍，看看是不是真是這樣：
<style>  div {    width: 100px;    height: 100px;    border: 1px solid saddlebrown;}  .box1 {    position: relative;    z-index: -1;    background: violet;}  .box2 {    margin-top: -50px;    margin-left: 50px;    background: salmon;}  .box3 {    float: left;    margin-top: -50px;    margin-left: 100px;    background: wheat;}  .box4 {    display: inline-block;    background: greenyellow;    margin-left: -50px;}  .box5 {    position: relative;    z-index:0;    left: 200px;    top: -50px;    background: palevioletred;}  .box6 {    position: relative;    z-index: 1;    left: 250px;    top: -100px;    background: gold}</style></head><body>  <div class="box1">1定位z-index<0</div>  <div class="box2">2塊級元素</div>  <div class="box3">3浮動</div>  <div class="box4">4行內元素</div>  <div class="box5">5定位z-index=0</div>  <div class="box6">6定位z-index>0</div></body>

推薦閱讀