CSS Academy · Ders

Statik ve Göreli Konumlandırma

Varsayılan statik konumu ve göreli konumlandırmanın öğeleri normal yerlerinden nasıl taşıdığını anlayın.

Statik ve Göreli Konumlandırma, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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 Özelliği

position özelliği, bir öğenin belge akışında nasıl konumlandırılacağını denetler. Beş değer şunlardır: static, relative, absolute, fixed ve sticky.

position: static (Varsayılan)

Her öğenin varsayılanı position: static değeridir. Statik öğeler normal belge akışını izler: blok öğeler dikey olarak üst üste yerleşir, satır içi öğeler soldan sağa doğru akar. Ofset özelliklerinin (top, right, bottom, left) hiçbir etkisi yoktur.

position: relative

position: relative, öğeyi normal akışta tutar ancak top, right, bottom, left kullanarak öğeyi kendi normal konumuna göre kaydırmanıza olanak tanır.

<div class="shifted">Shifted 10px down, 20px right — original space still reserved.</div>

Temel Nokta: Alan Korunur

Ofsetlerle birlikte position: relative kullandığınızda, öğe görsel olarak hareket eder ancak özgün yerleşim alanı hâlâ ayrılmış olur. Diğer öğeler bu boşluğu doldurmaz.

Top, Right, Bottom, Left

Ofset özellikleri, öğeyi referans noktasından hareket ettirir:

top: üst kenardan aşağı doğru hareket ettirir
left: sol kenardan sağa doğru hareket ettirir
Negatif değerler yönü tersine çevirir

<span class="badge">NEW</span>

z-index için position Gerekir

z-index yalnızca konumlandırılmış öğelerde çalışır (statik öğelerde çalışmaz). Katman sırasını denetlemeniz gerekiyorsa en azından position: relative ayarlayın.

<div class="tooltip">Tooltip (relative + z-index)</div>

Kapsayıcı Blok Olarak Relative

position: relative kullanımının en önemli amacı, herhangi bir ofset değeri olmasa bile bir öğeyi mutlak konumlandırılmış alt öğeler için kapsayıcı blok hâline getirmektir.

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

Relative ve Transform Birlikteliği

position: relative ile transform özelliklerini birleştirmek yeni bir yığın bağlamı oluşturur. Öğe akışta kalır ancak görsel olarak dönüştürülebilir.

<div class="hover-lift demo-hover">Hover me — I lift up</div>

relative Ne Zaman Kullanılmamalı

Her öğeye position: relative ayarlamaktan kaçının. Bu, z-index yönetimini karmaşıklaştırabilecek yığın bağlamları oluşturur. Yalnızca ofsetlere ihtiyaç duyduğunuzda veya mutlak konumlandırılmış alt öğeleri sabitlemek istediğinizde kullanın.

Geçişlerle Birlikte Kullanma

Relative konumlandırma yerleşim akışını etkilemediğinden, görsel efektler için top/left özelliklerini güvenle canlandırabilirsiniz. Ancak transform: translate() özelliğini canlandırmak daha yüksek performans sağlar.

<div class="shake demo-hover">Hover me — I shake</div>

Konumlandırma Sorunlarını Ayıklama

DevTools'ta etkin position değerini görmek için Hesaplanan paneline bakın. Kutu modeli diyagramı, uygulanan ofset koordinatlarını tam olarak gösterir.

Hızlı Kontrol

Bir öğeye position: relative; top: 20px uyguladığınızda, öğenin yerleşim alanına ne olur?

Özet

position: static varsayılandır; ofset yoktur ve yığın oluşturmaz. position: relative, öğenin kendi konumuna göre ofset uygulanmasına olanak tanır ve yerleşim alanını korur. En önemli rolü, mutlak konumlandırılmış alt öğeler için kapsayıcı blok olarak görev yapmaktır.

Sıkça Sorulan Sorular

“Statik ve Göreli Konumlandırma” dersi ücretsiz mi?

Evet — “Statik ve Göreli Konumlandırma” 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.

“Statik ve Göreli Konumlandırma” dersinde ne öğreneceğim?

Varsayılan statik konumu ve göreli konumlandırmanın öğeleri normal yerlerinden nasıl taşıdığı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 1. dersidir.

“Statik ve Göreli Konumlandırma” 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