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

当你得到其他老年人的答案，但只想添加为什么我们要求将位置属性设置为相对，绝对或固定。

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

z-index中的CSS属性控制重叠的元素的垂直堆叠顺序。如同，在哪一个看起来好像是离你很近。 z-index仅影响位置值不是静态（默认值）的元素。

元素可能由于各种原因而重叠，例如相对定位已将其推到其他东西上。负利润已经拉动了另一个因素。绝对定位的元素彼此重叠。各种各样的原因。

没有任何z-index值，元素stack按照它们出现在带有(the lowest one down at the same hierarchy level appears on top).的 DOM non-static positioning元素中的顺序将始终显示在具有默认静态定位的元素顶部。

关于堆叠上下文的要点是，z-index可用于仅在其自己的堆叠上下文内重新排列元素的堆叠顺序。整个堆叠上下文在其堆叠上下文中具有堆叠位置，该堆叠位置由其z-index属性以及该父堆叠上下文中的其兄弟之间的属性确定。因此，来自不同堆叠上下文的元素永远不会在最终堆叠顺序中交错（这就是规范在表示堆叠上下文是“原子”时的含义）。

如果您根据“painters algorithm”,对象在场景中从前到后绘制，那么堆叠上下文就像是绘画中的绘画。首先以正确的顺序将堆叠上下文中的所有内容按照正确的顺序从前到后绘制，然后在绘制其父上下文时将整个结果打到它所属的任何位置。

没有z-index,的东西在DOM顺序中堆叠很多但是上面有定位的东西，但是也值得一提的是浮动也是在非浮动之前（但在定位的框后面）。

为什么嵌套的z-index不起作用

2 个答案: