Question

我的位置有问题：粘滞和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时，将使用默认的z-index值定位.sticky元素。因此，由于.overlay的z-index值为999，因此将其自身置于背景中。.modal是.sticky的子代，它将永远无法进入{{1 }}。

您必须更改HTML的结构，或仅在.overlay元素上添加一个z-index。

CSS位置置顶和Z-Index叠加/模态

1 个答案: