Mengapa z-index tidak berfungsi?

Jadi jika saya mengerti z-indexdengan 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?

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.

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

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

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/