0Pricing
CSS Academy · Ders

Z-Index ve Katmanlama Bağlamı

z-index kullanarak hangi öğelerin üstte görüneceğini denetleyin ve katmanlama bağlamlarını anlayın.

Z-Index ve Katmanlama Bağlamı, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

z-index Nedir?

z-index, konumlandırılmış öğelerin Z ekseni üzerindeki yığın sırasını (önden arkaya) denetler. Öğeler üst üste geldiğinde daha yüksek değerler, daha düşük değerlerin üzerinde görünür.

z-index Yalnızca Konumlandırılmış Öğelerde Çalışır

z-index, position: static (varsayılan) değerine sahip öğeleri etkilemez. z-index'in uygulanması için relative, absolute, fixed veya sticky değerlerinden birine sahip olmanız gerekir.

<div class="popup">Popup (position + z-index)</div>

Varsayılan Yığınlama Sırası

Açıkça z-index belirtilmediğinde öğeler şu sırayla yığınlanır (arkadan öne):

  1. Kök öğenin arka planı
  2. Blok düzeyindeki öğeler (akış sırasına göre)
  3. Yüzen öğeler
  4. Satır içi öğeler
  5. z-index: auto veya 0 değerine sahip konumlandırılmış öğeler

Yığınlama Bağlamı

Yığınlama bağlamı, ortak bir z eksenine sahip öğeler katmanıdır. Z-index değerleri yalnızca aynı yığınlama bağlamı içinde birbiriyle karşılaştırılır. Bir yığınlama bağlamının içindeki öğe, z-index değeri ne olursa olsun, bu bağlamın dışındaki öğelerin üzerine yerleştirilemez.

Yığınlama Bağlamını Ne Oluşturur?

Aşağıdakiler yeni bir yığınlama bağlamı oluşturur:

  • position + auto dışında bir z-index
  • 1'den küçük opacity
  • Uygulanmış transform, filter veya perspective
  • Belirli özelliklerde will-change
  • isolation: isolate
  • z-index değerine sahip Flex/grid alt öğeleri

Yığınlama Bağlamı Yalıtımı

Görsel bir yan etki oluşturmadan kasıtlı olarak yığınlama bağlamı oluşturmak için isolation: isolate kullanın. Kendi z-index katmanlarını kapsaması gereken kullanıcı arayüzü bileşenleri için kullanışlıdır.

<div class="modal-wrapper">Isolated stacking context</div>

z-index Ölçeği Sorunu

Projelerde çoğu zaman geliştiricilerin değerleri 9999 veya 99999'a yükselterek birbirleriyle yarıştığı "z-index savaşları" yaşanır. Bunu CSS değişkenlerini kullanarak adlandırılmış bir z-index ölçeğiyle çözebilirsiniz:

<p>Custom properties define a z-index scale used across the app.</p>

Negatif z-index

Negatif z-index değerleri, öğeleri kapsayan bloğun arka planının arkasına yerleştirir. Bu özellik, içeriğin arkasına yerleştirilen dekoratif sözde öğe katmanları için kullanılabilir.

<div class="card">Card with a decorative gradient layer behind it</div>

Yığınlama Sorunlarını Ayıklama

Bir modal pencere veya araç ipucu başka bir öğenin arkasında göründüğünde, bunun nedeni genellikle üst öğelerden birinde bulunan ve düşük z-index değerine sahip bir yığınlama bağlamıdır. DevTools'un 3B Görünüm'ünü kullanın veya üst öğelerdeki opacity, transform ve filter özelliklerini kontrol edin.

Flex ve Grid'de z-index

Flex ve grid öğeleri, açıkça position ayarlamadan doğrudan z-index kullanabilir. Tarayıcı, yığınlama amacıyla bu öğeleri konumlandırılmış kabul eder.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Sabit Modallar ve z-index

Modallar, üst öğelerin yığınlama bağlamlarından çıkabilmeleri için <body> öğesinin (veya üst düzey bir kapsayıcının) doğrudan alt öğeleri olmalıdır. HTML <dialog> öğesi, tarayıcının üst katmanında bunu yerel olarak yönetir.

Hızlı Kontrol

İki üst üste binen öğe, farklı üst öğe yığınlama bağlamlarında z-index: 100 değerine sahip. Hangisinin üstte görüneceğini ne belirler?

Özet

z-index, konumlandırılmış öğelerin önden arkaya yığınlanmasını denetler. Yığınlama bağlamları, z-index yarışını birbirinden yalıtır. Bir üst öğede yığınlama bağlamı oluşturan herhangi bir özellik, alt öğelerin z-index değerlerini kendi bağlamında hapsedebilir. Açık sınırlar oluşturmak için isolation: isolate, bir z-index ölçeği oluşturmak için de CSS değişkenlerini kullanın.

Sıkça Sorulan Sorular

“Z-Index ve Katmanlama Bağlamı” dersi ücretsiz mi?

Evet — “Z-Index ve Katmanlama Bağlamı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Z-Index ve Katmanlama Bağlamı” dersinde ne öğreneceğim?

z-index kullanarak hangi öğelerin üstte görüneceğini denetleyin ve katmanlama bağlamlarını anlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Z-Index ve Katmanlama Bağlamı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Statik ve Göreli Konumlandırma
  2. Mutlak Konumlandırma ve İçeren Blok
  3. Sabit ve Yapışkan Konumlandırma
  4. Z-Index ve Katmanlama Bağlamı
← CSS Academy Sayfasına Dön