CSS位置置顶和Z-Index叠加/模态 [英] CSS position Sticky and Z-Index overlay/modal

问题描述

我的位置有问题：粘性和z-index

i have a problem with the position: sticky and z-index

我希望粘性元素中的模态被覆盖层覆盖。
位置：相对有效：模态在叠加层之前。但是当我使用Sticky时，模态就位于叠加层的后面。

I want my modal in the sticky-element to be overlayed by the overlay. With position: relative it works: the modal is before the overlay. But when I use Sticky the modal is behind the overlay.

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

Hope it's understandable what I mean. Here's the example:

.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>

推荐答案

设置 position：相对时， .modal 元素是相对于主体的，因为它的位置为：固定。这样，z-index值1000就会显示在前景中。

When you set position: relative, the .modal element is relative to the body because it has position: fixed. As such, the z-index value of 1000 put it in foreground.

当您使用位置：粘性时，放置 .sticky 元素，并使用默认的z-index值。因此，它将自己置于背景中，因为 .overlay 的z索引值为999。 .modal 是子级 .sticky 中的内容，它将永远无法位于 .overlay 前面。

When you use position: sticky, the .sticky element is positionned, with the default z-index value. Therefore, it positions itself in background because .overlay's z-index value of 999. .modal being a child of .sticky, it will never be able to go in front of .overlay.

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

You must change the structure of your HTML, or simply add a z-index on your .sticky element.

这篇关于CSS位置置顶和Z-Index叠加/模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！