爲什麼嵌套的z索引不起作用

Question

我有一個疊加層，我想要顯示一些信息。但是，在疊加層下面有一個按鈕，我想要在疊加層上顯示該按鈕。我已經設置了z-index爲9998的疊加層和它下面的z-index爲9999的按鈕，但它不起作用。這可能嗎？

.overlay-message { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    background-color: rgb(0, 0, 0); 
 
    opacity: .9; 
 
    z-index: 9998; 
 
} 
 
h4 { display: table-cell; 
 
color: #fff;text-align: center; 
 
vertical-align: middle; } 
 
.container { 
 
    align-items: center; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
} 
 
.row { 
 
    display: table !important; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
    .one-fifth-flex { 
 
     width: 50%; 
 
     padding-bottom: 20px; 
 
     float: left; 
 
    } 
 

 
    .ico-btn { 
 
     background-color:transparent; 
 
     color:rgb(26, 188, 156); 
 
     border-color:rgb(26, 188, 156); 
 
     border-style: solid; 
 
     border-width: 10px; 
 
     width:100px; 
 
     z-index: 9999; 
 
}

<div class="overlay-message"> 
 
     <h4>Hey! Tap on the button above!</h4> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="one-fifth-flex"> 
 
      <div role="button" class="ico-btn"> 
 
       Me 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

您需要設置position屬性相對的，絕對的或固定的按鈕z-index考慮：

.overlay-message { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    background-color: rgb(0, 0, 0); 
 
    opacity: .9; 
 
    z-index: 9998; 
 
} 
 
h4 { display: table-cell; 
 
color: #fff;text-align: center; 
 
vertical-align: middle; } 
 
.container { 
 
    align-items: center; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
} 
 
.row { 
 
    display: table !important; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
    .one-fifth-flex { 
 
     width: 50%; 
 
     padding-bottom: 20px; 
 
     float: left; 
 
    } 
 

 
    .ico-btn { 
 
     position: relative; 
 
     background-color:transparent; 
 
     color:rgb(26, 188, 156); 
 
     border-color:rgb(26, 188, 156); 
 
     border-style: solid; 
 
     border-width: 10px; 
 
     width:100px; 
 
     z-index: 9999; 
 
}

<div class="overlay-message"> 
 
     <h4>Hey! Tap on the button above!</h4> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="one-fifth-flex"> 
 
      <div role="button" class="ico-btn"> 
 
       Me 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

作爲你g ot其他老年人的答案，但只是想補充爲什麼我們要求位置屬性被設置爲相對，絕對或固定。

參考：https://css-tricks.com/almanac/properties/z/z-index/

在CSS的z-index屬性控制元素重疊垂直堆疊順序。就像在哪裏，看起來好像它離你更近。 z-index隻影響具有不同於靜態（默認值）的位置值的元素。

元素可以因各種原因重疊，例如相對定位已將其推到別的東西上。負邊界已經將元素拉到另一邊。絕對定位的元素相互重疊。種種原因。

沒有任何z-index值，它們出現在DOM(the lowest one down at the same hierarchy level appears on top).元素與non-static positioning始終顯示在默認靜態定位元素的頂級元素stack順序。

關於堆疊上下文的要點是z-index可以用來重新排列元素的堆棧順序，只能在自己的堆棧上下文中重新排列。整個堆疊上下文在其堆棧上下文中具有堆棧位置，堆棧上下文中的堆棧位置由其z-index屬性及其父代堆棧上下文中的兄弟元素的堆棧位置確定。因此，來自不同堆疊環境的元素不會以最終的堆疊順序進行交織（這是規範在堆疊環境爲「原子」時的含義）。

如果您認爲按照「painters algorithm」,的順序將對象繪製到場景中，則堆疊上下文就像繪畫中的繪畫。您首先以正確的順序在堆棧上下文中繪製所有內容，然後在繪製其父上下文時將整個結果放在其所屬的任何位置。

沒有z-index,東西確實堆疊在DOM順序上，但是定位在上面，但也值得一提的是浮動也會在非浮動前面（但位於定位框後面）。