为什么嵌套的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顺序上，但是定位在上面，但也值得一提的是浮动也会在非浮动前面（但位于定位框后面）。