Çalıştırılabilir CSS Dokümanları: CSS z-index

Q: z-index'im neden çalışmıyor?

Ya element konumlandırılmamıştır (z-index, static dışında bir position ister ya da bir flex veya grid çocuğu olmalıdır), ya da daha düşük sırada bir stacking context oluşturan bir ebeveynin içindedir. Bir çocuk, kendi z-index'i ne olursa olsun, stacking context'inin altına yerleştirildiği bir elementin üstüne asla çıkamaz.

Q: Stacking context'i ne oluşturur?

Diğerlerinin yanında: kök element, z-index'i auto dışında olan konumlandırılmış bir element, position: fixed ya da sticky, z-index'i olan bir flex veya grid çocuğu, 1'in altındaki opacity, transform, filter, isolation: isolate ve bu özellikler üzerindeki will-change.

Q: z-index position olmadan çalışır mı?

Normal blok ya da satır içi elementlerde hayır: position: static onu yok sayar. Flex ve grid öğelerinde ise hiç position olmadan çalışır.

z-index ne yapar

Elementler üst üste bindiğinde hangisinin önde çizileceğine z-index karar verir. Yüksek sayı kazanır. Konumlandırılmış elementlerde (static dışındaki her position) ve flex ile grid öğelerinde çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .stage { position: relative; height: 170px; }
    .card {
      position: absolute;
      width: 130px; height: 100px; padding: 8px;
      color: white; font-weight: 600; border-radius: 8px;
    }
    .a { background: #2563eb; top: 0; left: 0; z-index: 3; }
    .b { background: #16a34a; top: 30px; left: 60px; z-index: 1; }
    .c { background: #f59e0b; top: 60px; left: 120px; z-index: 2; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="card a" id="a">A z-index: 3</div>
    <div class="card b" id="b">B z-index: 1</div>
    <div class="card c" id="c">C z-index: 2</div>
  </div>
</body>
</html>

z-index olmadan, HTML'de sonra gelen elementler öncekilerin üstüne çizilir, yani C, B'yi ve B de A'yı örterdi. z-index değerleri bunu tersine çeviriyor: A önde, sonra C, sonra B.

Değerler

Değer	Anlamı
`auto` (varsayılan)	Kardeşleriyle 0 seviyesinde istiflenir ve stacking context oluşturmaz
`0`	0 seviyesi, ama bir stacking context oluşturur
Pozitif tam sayı	Düşük değerlerin önünde
Negatif tam sayı	0 seviyesinin arkasında; ebeveyn stacking context'i oluşturuyorsa ebeveynin içeriğinin de arkasında

Yalnızca tam sayılar geçerlidir: z-index: 1.5 yok sayılır.

z-index 9999 neden kaybedebilir: stacking context'ler

z-index değerleri bütün sayfa boyunca karşılaştırılmaz. Elementler stacking context'ler halinde gruplanır ve bir z-index yalnızca aynı context içindeki elementleri sıralar. Context'in kendisi ise onu oluşturan elementin z-index'i kullanılarak tek bir katman olarak yerleştirilir.

Aşağıda mavi açılır menünün z-index: 9999 değeri var, ama z-index: 1 olan bir başlığın içinde duruyor. O başlığın kardeşi olan yeşil şeridin z-index: 2 değeri var. Açılır menü dahil bütün başlık katmanı şeridin altında:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacking context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .header {
      position: relative;
      z-index: 1;                 /* creates a stacking context */
      height: 40px; padding: 10px; background: #e5e7eb;
    }
    .dropdown {
      position: absolute;
      top: 40px; left: 20px;
      z-index: 9999;              /* only counts inside .header */
      width: 180px; height: 110px; padding: 8px;
      background: #2563eb; color: white;
    }
    .banner {
      position: relative;
      z-index: 2;
      margin-top: 20px; height: 60px; padding: 10px;
      background: #16a34a; color: white;
    }
    .no-context .header { z-index: auto; }
  </style>
</head>
<body>
  <div id="page">
    <div class="header">Header, z-index: 1
      <div class="dropdown" id="dropdown">Dropdown, z-index: 9999</div>
    </div>
    <div class="banner" id="banner">Banner, z-index: 2</div>
  </div>
  <p><button type="button" id="fix">Set the header's z-index to auto</button> <span id="out"></span></p>
  <script>
    const report = () => {
      const r = document.getElementById('banner').getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 60, r.top + 20);
      document.getElementById('out').textContent = 'On top at the overlap: ' + top.id;
    };
    document.getElementById('fix').addEventListener('click', () => {
      document.getElementById('page').classList.toggle('no-context');
      report();
    });
    report();
  </script>
</body>
</html>

Butona bas. z-index: auto ile başlık artık bir stacking context oluşturmaz, böylece açılır menünün 9999'u doğrudan şeridin 2'siyle karşılaştırılır ve açılır menü öne gelir. Açılır menüyü 99999'a çıkarmak asla işe yaramazdı.

Stacking context'i ne oluşturur

Bunlardan herhangi biri bir elementi kendi stacking context'ine çevirir ve içindeki her şeyin z-index'ini hapseder:

Özellik	Koşul
`position: relative` ya da `absolute`	`auto` dışında bir `z-index` ile
`position: fixed` ya da `sticky`	Her zaman
Flex ya da grid öğesi	`auto` dışında bir `z-index` ile
`opacity`	1'in altında
`transform`, `scale`, `rotate`, `translate`	`none` dışındaki herhangi bir değer
`filter`, `backdrop-filter`	`none` dışındaki herhangi bir değer
`isolation`	`isolate`
`mix-blend-mode`	`normal` dışındaki herhangi bir değer
`will-change`	Yukarıdaki özelliklerden birini adlandırırsa
`contain`	`layout` ya da `paint` (ve `strict`, `content`)

Şaşırtıcı olanlar opacity ve transform'dur: bir ebeveyne bir solma ya da hover animasyonu eklemek, açılır menüsünü aniden bir sonraki bölümün arkasına atabilir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>opacity creates a context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 0; }
    .col { position: relative; width: 160px; height: 120px; padding: 8px; background: #e5e7eb; }
    .col + .col { background: #fde68a; }
    .tip {
      position: absolute; top: 40px; left: 100px; z-index: 10;
      width: 120px; padding: 8px; background: #2563eb; color: white;
    }
    .faded { opacity: 0.99; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col faded" id="first">opacity: 0.99
      <div class="tip" id="tip">Tooltip z-index: 10</div>
    </div>
    <div class="col" id="second">Next column</div>
  </div>
  <p id="out"></p>
  <script>
    const r = document.getElementById('second').getBoundingClientRect();
    document.getElementById('out').textContent =
      'On top in the overlap: ' + document.elementFromPoint(r.left + 30, r.top + 60).id;
  </script>
</body>
</html>

Tooltip'in z-index: 10 değeri onu bir sonraki sütunun üstüne koymalı. Ama opacity: 0.99 ilk sütunu z-index'i auto (0 seviyesi) olan bir stacking context yapıyor ve ikinci sütun HTML'de aynı seviyede daha sonra geliyor, bu yüzden tooltip dahil bütün ilk sütunun üstüne boyanıyor. opacity satırını sil, tooltip yine önde olur.

Negatif z-index

Negatif bir z-index bir elementi kardeşlerinin arkasına koyar. Ebeveyn bir stacking context oluşturmuyorsa ebeveynin arka planının bile arkasına gidebilir; bu yaygın bir sürprizdir. Ebeveyne verilen isolation: isolate başka hiçbir görsel etki olmadan bir context oluşturur ve negatif çocuğu onun içinde tutar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .button {
      position: relative;
      padding: 14px 20px; background: #e5e7eb; font-weight: 600;
    }
    .button::before {
      content: "";
      position: absolute; inset: -6px;
      background: #f59e0b;
      z-index: -1;               /* behind the button's text */
    }
    .isolated { isolation: isolate; }
  </style>
</head>
<body>
  <div class="button">No isolation</div>
  <div class="button isolated">isolation: isolate</div>
</body>
</html>

Isolation olmadan kehribar rengi çerçeve butonun kendi gri arka planının arkasına düşer, bu yüzden yalnızca kenarı görünür. isolation: isolate ile çerçeve butonun stacking context'inin içinde kalır: arka planının üstünde, metninin altında.

Bir z-index ölçeği

Tırmanan sayılar yerine bütün site için birkaç adlandırılmış katman seç:

:root {
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}
.modal { position: fixed; z-index: var(--z-modal); }

Katman hatalarının çoğu sayı hatası değil stacking context hatasıdır; bu yüzden küçük bir ölçek artı içeride z-index kullanan bileşenlere verilen isolation: isolate çok iş görür. z-index'in çalışması için konumlandırma gerekir; bunu position sayfası anlatıyor.

Sık yapılan hatalar

Static bir elementte z-index. position: relative ekle (ya da onu bir flex veya grid öğesi yap).
9999'a kadar tırmanmak. Bir ebeveyn rakibin altında bir stacking context oluşturuyorsa hiçbir çocuk değeri kazanamaz. Bunun yerine context'i bul.
Bir ebeveyne eklenen yeni opacity, transform ya da filter değerinin açılır menüyü aniden hapsetmesi.
Ondalık değerler. z-index: 1.5 geçersizdir.
z-index: 0 ile auto'nun aynı davranmasını beklemek. 0 bir stacking context oluşturur; auto oluşturmaz.
Derin iç içe bileşenlerin içindeki modal'lar. Hiçbir ata context onları hapsedemesin diye onları <body>'nin sonuna yakın bir yerde çiz (ya da <dialog> elementinin üst katmanını kullan).

Sıkça Sorulan Sorular

z-index ne işe yarar?

Üst üste binen elementlerin katman sırasını ayarlar: aynı stacking context içinde yüksek değer düşük olanın önüne çizilir. Varsayılan auto'dur ve değerler negatifler dahil tam sayılardır.

z-index'im neden çalışmıyor?

Ya element konumlandırılmamıştır (z-index, static dışında bir position ister ya da bir flex veya grid çocuğu olmalıdır), ya da daha düşük sırada bir stacking context oluşturan bir ebeveynin içindedir. Bir çocuk, kendi z-index'i ne olursa olsun, stacking context'inin altına yerleştirildiği bir elementin üstüne asla çıkamaz.

Stacking context nedir?

Tek bir katman olarak birlikte istiflenen bir element grubudur. İçinde çocuklar z-index'lerine göre sıralanır; dışarıda ise bütün grup, onu oluşturan elementin z-index'iyle yerleştirilir.

Stacking context'i ne oluşturur?

Diğerlerinin yanında: kök element, z-index'i auto dışında olan konumlandırılmış bir element, position: fixed ya da sticky, z-index'i olan bir flex veya grid çocuğu, 1'in altındaki opacity, transform, filter, isolation: isolate ve bu özellikler üzerindeki will-change.

z-index position olmadan çalışır mı?

Normal blok ya da satır içi elementlerde hayır: position: static onu yok sayar. Flex ve grid öğelerinde ise hiç position olmadan çalışır.

İlgili kavramlar