CSS позиция Sticky и Z-Index наложение / модальное

Question

У меня проблема с позицией: липкая и z-index

Я хочу, чтобы мой модал в липком элементе был наложен наложением. С позицией: относительная это работает: модальное перед наложением. Но когда я использую 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 по умолчанию. Следовательно, он позиционирует себя в фоновом режиме, поскольку значение z-index .overlay равно 999. .modal, являясь дочерним по отношению к .sticky, он никогда не сможет идти перед .overlay.

Вы должны изменить структуру своего HTML-кода или просто добавить z-index для вашего элемента .sticky.