Pertanyaan Overlay / hover div di div kontainer flexbox


Saya mencoba melapisi div yang akan mengapung dalam wadah flexbox.

Header adalah wadah flexbox dan ada tiga div flexbox yang berfungsi dalam wadah. Overlay saya ingin overlay tiga div lainnya tetapi masih dibatasi dalam div container .header flexbox.

Saya sudah mencoba beberapa metode di stackoverflow dan di tempat lain, tetapi bagaimana tidak melihat solusi yang membahas overlay atau layering ketika digunakan bersama flexbox.

Terima kasih atas sarannya!

Tautan ke jsfiddle berikut: Link

HTML:

<div class="header">
    <div class="headerLeft">Left</div>
    <div class="headerMiddle">Middle</div>
    <div class="headerRight">Right</div>
    <div class="overlay">Overlay</div>
</div>

CSS:

.header {
    border: 3px solid orange;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    z-index: 0;
}

.headerLeft {
    border: 2px solid chartreuse;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}
.headerMiddle {
    border: 2px solid darkorchid;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}
.headerRight {
    border: 2px solid darkorange;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}

.overlay {
    border: 2px solid green;
    z-index: 10;
    background: rgba(0,0,0,0.3);
}

8
2018-04-19 16:49


asal


Jawaban:


Melihat semua kode komentar Anda, Anda berada di jalur yang benar dengan posisi relatif pada wadah fleksibel. Anda hanya perlu benar-benar memposisikan elemen overlay Anda.

http://jsfiddle.net/UHECE/4/

Tambahkan / hapus komentar gaya ini:

.header {
    position: relative;
}

.overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
}

23
2018-04-19 19:24