Mengapa z-index tidak berfungsi?

181

Jadi jika saya mengerti z-indexdengan benar, itu akan sempurna dalam situasi ini:

masukkan deskripsi gambar di sini

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?

Tautanjuice57
sumber

Jawaban:

433

The z-indexproperti hanya bekerja pada elemen dengan positionnilai selain static(misalnya position: absolute;, position: relative;atau position: fixed).

Ada juga position: sticky;yang didukung di Firefox, diawali di Safari, bekerja untuk sementara waktu di versi Chrome yang lebih lama di bawah bendera kustom, dan sedang dipertimbangkan oleh Microsoft untuk ditambahkan ke browser Edge mereka.

Penting
Untuk penentuan posisi reguler, pastikan untuk memasukkan position: relativeelemen tempat Anda juga mengatur z-index. Kalau tidak, itu tidak akan berpengaruh.

Evert
sumber
3
menambahkan ke jawaban ini, chrome dan kemungkinan browser lain pada tulisan ini mengharuskan Anda secara eksplisit menyatakan position: relativeuntuk indeks-z untuk bekerja, meskipun elemen-elemen berperilaku dengan cara relatif lain secara default
benipsen
staticelemen yang statis dan tidak bisa bergerak di sekitar x, y or z planes. Mereka tidak bisa pindah x plane (left or right)atau y plane (top or bottom)suka ketika kita bekerja dengan position: absolute. Dan mereka juga tidak bisa bergerak di z plane i.e. with z-index.
Akash
apakah Anda mengetahui adanya masalah dengan menggunakan z-indexelemen grid ??
oldboy
59

Jika Anda mengatur posisi ke nilai selain statictetapi elemen Anda z-indexsepertinya tidak berfungsi, mungkin beberapa elemen induk telah z-indexditetapkan.

Konteks penumpukan memiliki hierarki, dan setiap konteks penumpukan dianggap dalam urutan susun konteks penumpukan induk.

Maka dengan mengikuti html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

tidak peduli seberapa besar z-indexdari yang el3akan ditetapkan, itu akan selalu berada di bawah el1karena orangtuanya memiliki konteks susun yang lebih rendah. Anda dapat membayangkan susun urutan sebagai tingkat di mana susun susunan el3sebenarnya 3,8 yang lebih rendah dari 5 .

Jika Anda ingin memeriksa konteks susunan elemen induk, Anda dapat menggunakan ini:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

Ada artikel bagus tentang menumpuk konteks di MDN

Buksy
sumber
bagaimana cara memperbaikinya?
SM Pat
3
atur z-index elemen induk dengan tepat.
Buksy
suka naskah itu
Matoeil
31

Elemen Anda harus memiliki positionatribut. (mis absolute. relative, fixed) atau z-indextidak akan berfungsi.

clem
sumber
26

Dalam banyak kasus suatu elemen harus diposisikan z-indexagar berfungsi.

Memang, menerapkan position: relativeelemen-elemen dalam pertanyaan kemungkinan akan menyelesaikan masalah (tetapi tidak ada kode yang cukup untuk mengetahui dengan pasti).

Sebenarnya, position: fixed, position: absolutedan position: stickyjuga akan memungkinkan z-index, tetapi nilai-nilai juga mengubah tata letak. Dengan position: relativetata letak tidak terganggu.

Intinya, selama elemen itu tidak position: static(pengaturan default) itu dianggap diposisikan dan z-indexakan 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-indexbahkan saat positionada static.

Dari spesifikasi:

4.3. Item Z-Pemesanan Flex

Item fleksibel cat persis sama dengan blok inline, kecuali bahwa urutan dokumen yang dimodifikasi pesanan digunakan di tempat pesanan dokumen mentah, dan z-indexnilai-nilai selain automembuat konteks susun bahkan jika positionitu static.

5.4. Z-axis Ordering: z-indexproperti

Urutan lukisan kisi item persis sama dengan blok inline, kecuali bahwa urutan dokumen yang dimodifikasi pesanan digunakan sebagai pengganti urutan dokumen mentah, dan z-indexnilai selain automembuat konteks penumpukan bahkan jika positionada static.

Berikut ini demonstrasi z-indexbekerja pada item fleksibel yang tidak diposisikan: https://jsfiddle.net/m0wddwxs/

Michael Benjamin
sumber
3
"Elemen yang merupakan item fleksibel atau item kisi dapat menggunakan z-index bahkan ketika posisinya statis." Yap, spec pada dasarnya mengatakan untuk memperlakukan position: staticsama persis seperti itu akan memperlakukan position: relativeuntuk 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.
TylerH
@ TylerH kita harus memperhatikan bagian dari spesifikasi karena kita harus memperlakukan statis sama dengan relatif hanya ketika berhadapan dengan z-index dan tidak secara umum. Misalnya, Anda tidak dapat menggeser item fleksibel menggunakan kiri / atas / bawah / kanan kecuali jika Anda secara nyata speficy 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 )
Temani Afif
saya menemukan "bug" aneh dengan css. untuk beberapa alasan overflow-y: scrollmencegah overflow-x: visiblebekerja ... bisakah Anda melihatnya?
oldboy