web-dev-qa-db-ja.com

CSS位置スティッキーおよびZインデックスオーバーレイ/モーダル

位置に問題があります：スティッキーと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>
htmlcsscss-positionz-index
3
milkman

position: relativeを設定すると、.modal要素はposition: fixedを持っているため、本体を基準にしています。そのため、1000のz-index値はそれをフォアグラウンドに置きます。

position: stickyを使用すると、.sticky要素がデフォルトのz-index値で配置されます。したがって、.overlayのz-index値が999であるため、バックグラウンドに配置されます。.modalは.stickyの子であるため、.overlayの前に移動することはできません。 。

HTMLの構造を変更するか、.sticky要素にz-indexを追加する必要があります。

3
Thibaut Dupont