为啥嵌套的 z-index 不起作用[重复]

Posted 2023-03-06

【中文标题】为啥嵌套的 z-index 不起作用[重复]

【英文标题】：Why is a nested z-index not working [duplicate]为什么嵌套的 z-index 不起作用[重复]

【发布时间】：2018-02-03 23:20:21

【问题描述】：

我有一个覆盖，我想显示一些信息。但是，我想在叠加层下方显示一个按钮。我已将叠加层的 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>

【问题讨论】：

我看到很多 flex 属性，但没有 display: flex ... 如果没有这些，它们将无法工作

【参考方案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>

【参考方案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 工作。 ***.com/a/37310205/3597276