Jadi jika saya mengerti z-index
dengan benar, itu akan sempurna dalam situasi ini:
Saya ingin menempatkan gambar bawah (tag / kartu) di bawah div di atasnya. Jadi Anda tidak bisa melihat ujung yang tajam. Bagaimana saya melakukan ini?
z-index:-1 // on the image tag/card
atau
z-index:100 // on the div above
juga tidak bekerja. Juga tidak kombinasi dari hal seperti ini. Bagaimana bisa?
Stacking Context
.position: relative
untuk indeks-z untuk bekerja, meskipun elemen-elemen berperilaku dengan cara relatif lain secara defaultstatic
elemen yang statis dan tidak bisa bergerak di sekitarx, y or z planes
. Mereka tidak bisa pindahx plane (left or right)
atauy plane (top or bottom)
suka ketika kita bekerja denganposition: absolute
. Dan mereka juga tidak bisa bergerak diz plane i.e. with z-index
.z-index
elemen grid ??Jika Anda mengatur posisi ke nilai selain
static
tetapi elemen Andaz-index
sepertinya tidak berfungsi, mungkin beberapa elemen induk telahz-index
ditetapkan.Konteks penumpukan memiliki hierarki, dan setiap konteks penumpukan dianggap dalam urutan susun konteks penumpukan induk.
Maka dengan mengikuti html
tidak peduli seberapa besar
z-index
dari yangel3
akan ditetapkan, itu akan selalu berada di bawahel1
karena orangtuanya memiliki konteks susun yang lebih rendah. Anda dapat membayangkan susun urutan sebagai tingkat di mana susun susunanel3
sebenarnya 3,8 yang lebih rendah dari 5 .Jika Anda ingin memeriksa konteks susunan elemen induk, Anda dapat menggunakan ini:
Ada artikel bagus tentang menumpuk konteks di MDN
sumber
Elemen Anda harus memiliki
position
atribut. (misabsolute
.relative
,fixed
) atauz-index
tidak akan berfungsi.sumber
Dalam banyak kasus suatu elemen harus diposisikan
z-index
agar berfungsi.Memang, menerapkan
position: relative
elemen-elemen dalam pertanyaan kemungkinan akan menyelesaikan masalah (tetapi tidak ada kode yang cukup untuk mengetahui dengan pasti).Sebenarnya,
position: fixed
,position: absolute
danposition: sticky
juga akan memungkinkanz-index
, tetapi nilai-nilai juga mengubah tata letak. Denganposition: relative
tata letak tidak terganggu.Intinya, selama elemen itu tidak
position: static
(pengaturan default) itu dianggap diposisikan danz-index
akan berfungsi.Banyak jawaban untuk "Mengapa indeks-z tidak berfungsi?" pertanyaan menegaskan bahwa
z-index
hanya bekerja pada elemen yang diposisikan. Pada CSS3, ini tidak lagi benar.Elemen yang merupakan item fleksibel atau item kisi dapat digunakan
z-index
bahkan saatposition
adastatic
.Dari spesifikasi:
Berikut ini demonstrasi
z-index
bekerja pada item fleksibel yang tidak diposisikan: https://jsfiddle.net/m0wddwxs/sumber
position: static
sama persis seperti itu akan memperlakukanposition: relative
untuk item fleksibel dan kotak karena sifat dinamis dari metode tata letak tersebut. Jadi saya mungkin akan mengatakan itu bukan bahwa tidak lagi benar dalam CSS3 bahwa suatu elemen perlu diposisikan, tetapi bahwa CSS3 memperlakukan item fleksibel dan kotak seolah-olah mereka diposisikan, terlepas. Hanya dua cara memandang hal yang sama, mungkin.position:relative
. Keturunan item fleksibel dengan posisi absolut tidak akan menganggap item fleksibel sebagai blok yang mengandungnya karena item fleksibel tidak diposisikan. ( jsfiddle.net/0yo7utfL/2 )overflow-y: scroll
mencegahoverflow-x: visible
bekerja ... bisakah Anda melihatnya?