CSS 位置 Sticky 和 ​​Z-Index 覆盖/模态

Question

我的位置有问题：sticky 和 ​​z-index

我希望我的粘性元素中的模态被叠加层覆盖。 使用 position: relative 它可以工作：模态在覆盖之前。但是当我使用 Sticky 时，模态框位于覆盖层后面。

希望我的意思可以理解。 示例如下：

.sticky {
    position: sticky; /* <-- dosen't work */
    /* position: relative; /* <-- work */
    top: 0;

    width: 100%;
    height: 200vh;
    background: red;
}

.modal {
    z-index: 1000;

    position: fixed; 
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background: yellow;
    margin: 0 auto;
}

.overlay {
    z-index: 999;
    position: fixed;


    width: 100%;
    height: 100%;
    background: green;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.75;
}

<div class="overlay"></div>
<div class="sticky">
    <div class="modal">modal</div>
</div>

Answer 1

当您设置position: relative 时，.modal 元素相对于主体，因为它具有position: fixed。因此，z-index 值 1000 将其置于前台。

当您使用position: sticky 时，.sticky 元素将使用默认的 z-index 值定位。因此，它将自己定位在后台，因为.overlay 的 z-index 值为 999。.modal 是 .sticky 的子代，它永远无法走到 .overlay 的前面。

您必须更改 HTML 的结构，或者只需在 .sticky 元素上添加 z-index。