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

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/

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

元素可能由于多种原因而重叠，例如相对定位将其推到其他地方。负边距将元素拉到另一个元素之上。绝对定位的元素相互重叠。种种原因。

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

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

如果您从 “painters algorithm”, 的角度思考对象从后到前绘制到场景中的情况，那么堆叠上下文就像画中画。您首先以正确的顺序从后到前绘制堆叠上下文中的所有内容，然后在绘制其父上下文时将整个结果放在它所属的位置。

没有 z-index, 东西确实按 DOM 顺序堆叠，但上面有定位的东西，但同样值得一提的是，浮点数也被放在非浮点数前面（但在定位框）。

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

Why is a nested z-index not working

html

css

z-index