CSS Academy · Ders

Mutlak Konumlandırma ve İçeren Blok

Öğeleri, konumlandırılmış en yakın üst öğelerine göre mutlak olarak konumlandırın.

Mutlak Konumlandırma ve İçeren Blok, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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.

position: absolute

Mutlak konumlandırılmış bir öğe normal belge akışından çıkarılır. Diğer öğeler, bu öğe yokmuş gibi davranır. Öğe, en yakın konumlandırılmış üst öğesine göre konumlandırılır.

Kapsayıcı Blok

Mutlak konumlandırılmış bir öğenin kapsayıcı bloğu, static dışındaki bir position değerine sahip en yakın üst öğesidir. Böyle bir öğe yoksa, öğe başlangıç kapsayıcı bloğuna (görünüm alanına) göre konumlandırılır.

Kapsayıcı Blok Oluşturma

En yaygın yaklaşım, mutlak konumlandırılmış alt öğeleri kapsamak için üst öğeye position: relative eklemektir.

<div class="card">Card content<span class="badge">Badge</span></div>

absolute ile Ofset Özellikleri

Mutlak konumlandırmada top/right/bottom/left değerleri, kapsayıcı bloğun iç kenarından ölçülür.

<div class="tooltip-wrap">Hover target<span class="tooltip">I'm below the parent</span></div>

absolute ile Ortalamak

Mutlak öğeleri ortalamak için kullanılan klasik teknik:

<div class="center-wrap"><div class="centered">Perfectly centered</div></div>

absolute Öğelerin Genişliği ve Yüksekliği

Mutlak konumlandırılmış öğeler, varsayılan olarak içeriklerine sıkı sıkıya uyacak şekilde küçülür (genişlik veya yükseklik ayarlanmadığı sürece). Bu öğeler artık blok öğeler gibi kapsayıcılarının tam genişliğine yayılmaz.

Tüm Kenarlarla Genişletme

Dört kenarın tümünü 0 olarak ayarlamak, mutlak konumlandırılmış bir öğeyi kapsayıcı bloğunu dolduracak şekilde genişletir:

<div class="stretch-wrap"><div class="overlay">Overlay covers all edges</div></div>

inset Kısa Gösterimi

inset özelliği, top, right, bottom ve left özelliklerinin birlikte kullanılan kısa gösterimidir:

<div class="cover-wrap"><div class="full-cover"></div></div>

z-index ile Yığınlama

Mutlak konumlandırılmış öğeler yığın bağlamlarına katılır. Üst üste binen mutlak öğelerden hangisinin üstte görüneceğini denetlemek için z-index kullanın.

<div class="stack-wrap"><div class="box-a">Behind</div><div class="tooltip">On top (z-index:100)</div></div>

Yaygın Hata: Üst Öğeyi Unutmak

Üst öğeye position: relative eklemeyi unutursanız, mutlak alt öğe en yakın önceden konumlandırılmış üst öğeye (çoğu zaman görünüm alanına) göre konumlandırılır. Kapsayıcı bloğu her zaman kontrol edin.

Flex/Grid İçinde Absolute

Bir flex veya grid kapsayıcısı otomatik olarak konumlandırılmış bir öğe değildir. Mutlak alt öğeler için kapsayıcı blok hâline getirmek üzere açıkça position: relative eklemeniz gerekir.

Hızlı Kontrol

Üst öğelerinin hiçbirinde static dışında bir position değeri yoksa, mutlak konumlandırılmış bir öğe nereye yerleştirilir?

Özet

Mutlak konumlandırılmış öğeler belge akışından çıkar ve en yakın static olmayan üst öğelerine göre konumlandırılır. Yerleşimi denetlemek için üst öğeye her zaman position: relative ekleyin. Mutlak bir öğeyi kapsayıcısını dolduracak şekilde genişletmek için inset: 0 kullanın.

Sıkça Sorulan Sorular

“Mutlak Konumlandırma ve İçeren Blok” dersi ücretsiz mi?

Evet — “Mutlak Konumlandırma ve İçeren Blok” 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.

“Mutlak Konumlandırma ve İçeren Blok” dersinde ne öğreneceğim?

Öğeleri, konumlandırılmış en yakın üst öğelerine göre mutlak olarak konumlandırı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 2. dersidir.

“Mutlak Konumlandırma ve İçeren Blok” 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

← CSS Academy Sayfasına Dön