Z-endeksi neden çalışmıyor?

Bu yüzden z-indexdoğru anlarsam, bu durumda mükemmel olurdu:

Alttaki resmi (etiket / kart) üstündeki div altına yerleştirmek istiyorum. Böylece keskin kenarları göremezsiniz. Bunu nasıl yaparım?

z-index:-1 // on the image tag/card

veya

z-index:100 // on the div above

da çalışmıyor. Böyle bir şeyin kombinasyonu da yok. Nasıl olur?

z-indexÖzelliği yalnızca bir sahip öğelerde çalışır positiondışındaki değere static(örneğin position: absolute;, position: relative;ya da position: fixed).

Ayrıca position: sticky;Firefox'ta desteklenen, Safari'nin ön eki, özel bir bayrak altında Chrome'un eski sürümlerinde bir süre çalıştı ve Edge tarayıcılarına eklemek için Microsoft tarafından değerlendiriliyor.

Önemli
Düzenli konumlandırma position: relativeiçin, öğesini de ayarladığınız öğelere dahil ettiğinizden emin olun z-index. Aksi takdirde geçerli olmaz.

Konumu başka bir değere ayarlarsanız, staticancak öğeniz z-indexhala çalışmıyor gibi görünüyorsa, bazı üst öğelerin z-indexayarlanmış olması olabilir .

Yığın bağlamları hiyerarşiye sahiptir ve her yığın içeriği, üst öğenin yığın bağlamının yığın sırasında dikkate alınır.

Aşağıdaki html ile

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>

hayır ne kadar büyük bir önemi z-indexait el3kurulacaktır, her zaman altında olacak el1's ebeveyn alt yığın bağlamı vardır çünkü. İstifleme sırasını, istifleme sırasının el3aslında 3.8 olan 5'ten düşük olduğu düzeyler olarak hayal edebilirsiniz .

Üst öğelerin yığınlama bağlamlarını kontrol etmek istiyorsanız, bunu kullanabilirsiniz:

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));

MDN'de bağlamları istifleme hakkında harika bir makale var

Öğelerinizin bir positionniteliği olması gerekir . (örn absolute. relative, fixed) veya z-indexçalışmaz.

Çoğu durumda z-index, çalışmak için bir eleman konumlandırılmalıdır .

Aslında, position: relativesorudaki öğelere başvurmak sorunu muhtemelen çözecektir (ancak kesin olarak bilmek için yeterli kod yoktur).

Aslında position: fixed, position: absoluteve position: stickyayrıca sağlayacak z-index, ancak bu değerler de düzeni değiştirmek. İle position: relativedüzeni rahatsız edilmez.

Temel olarak, öğe position: static(varsayılan ayar) olmadığı sürece, konumlandırılmış olarak kabul edilir ve z-indexçalışacaktır.

Çok cevaplar "Neden Z-endeksi çalışma nedir?" sorular z-index sadece konumlandırılmış elemanlar üzerinde çalıştığını iddia ediyor . CSS3 itibariyle bu artık geçerli değil.

Olan elementler esnek ürün veya ızgara öğeler kullanabilirsiniz z-indexbile positionolduğunu static.

Teknik özelliklerden:

4.3. Esnek Ürün Z-Siparişi

Esnek öğeler, satır içi bloklarla tam olarak aynı şekilde boyanır, ancak ham belge sırası yerine siparişte değiştirilmiş belge sırası kullanılır ve olsa bile yığın içeriği oluşturmak z-indexdışındaki değerler kullanılır .autopositionstatic

5.4. Z ekseni Siparişi: z-indexözellik

Izgara öğeler boyama sırası tam ham belge düzenin yerine kullanılan bu sırayla modifiye edilmiş bir belge için hariç olmak üzere, içi blok ile aynıdır, ve z-indexdaha başka değerler autobile bir istifleme içeriğini oluşturmak positionolup static.

İşte z-indexkonumlandırılmamış esnek öğeler üzerinde çalışırken bir gösteri : https://jsfiddle.net/m0wddwxs/