Yükleniyor...

CSS Position

Akış dersleri kutulara bir satıra nasıl katılacaklarını söyledi. position başka bir soruyu yanıtlar: bu kutu normal yerine, bir ataya veya ekrana göre nereye oturur? Stacking veya float hilelerine uzanmadan önce beş günlük değeri öğrenin.

Bir position araç seti

📊 Position bir bakışta

Değer Günlük iş
static Varsayılan — top/left gibi ofsetler genelde işe yaramaz
relative Normal yerinden hafif kayar; yerini korur; absolute çocuklara çapa olabilir
absolute Normal akıştan çıkar; en yakın konumlandırılmış ataya göre yerleştirilir
fixed Akıştan çıkar; kaydırırken viewport’a sabitlenir
sticky Bir kaydırma eşiğine kadar relative gibi davranır, sonra kapsayıcısında yapışır

top, right, bottom ve left ofsetleri yalnızca position static olmadığında anlamlıdır. Önce modu seçin, sonra ofseti ince ayarlayın.

Relative — kibar bir kaydırma

relative öğeyi akışta tutar. Orijinal alan ayrılmış kalır. Küçük ofsetler görsel ince ayar için idealdir — ve absolute çocukların uyması gereken bir ebeveyni işaretlemek için.

Relative kaydırma

css 
.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — akıştan çık

absolute kutuyu normal akıştan çeker. Komşular boşluğu kapatır. Yerleştirme, position’ı static olmayan en yakın ataya dayanır — çoğu zaman relative bir ebeveyn. Bu çapa olmadan öğe daha büyük bir containing block’a tırmanabilir.

Absolute rozet

css 
.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

Absolute’a bir yuva verin

Absolute çocukları bilinçli bir ebeveynle eşleştirin. İlişkiyi sınıflarla adlandırın ki düzen okunaklı kalsın.

Konumlandırılmış ebeveyn

css 
.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — viewport’a yapış

fixed öğeyi ekrana sabitler. Sayfayı kaydırmak onu hareket ettirmez. Sakin bildirimler veya araç çubukları için kullanın — her sütun düzeninin kısayolu olarak değil.

Fixed bildirim

css 
.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — önce relative, sonra yapışkan

sticky bir kaydırma eşiğini geçene kadar akışta kalır (top yaygındır), sonra kaydırılabilir atasının içinde yapışır. Kaydırma alanı ve mantıklı bir ebeveyn gerekir — yoksa bozuk hissedilir.

Sticky bölüm etiketi

css 
.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

Sakin bir position alışkanlığı

relative’i küçük kaydırmalar ve absolute çapalar için kullanın. absolute’i bilinen bir ebeveyn içindeki rozet ve katmanlar için kullanın. fixed ve sticky’yi bilinçli chrome için saklayın. z-index stacking ve float temizliği kendi derslerine kalsın.

Adlandırılmış position rolleri

css 
.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

Kendiniz deneyin

  1. Bir .card’ı position: relative ve küçük top / left ile kaydırın.
  2. Bir .badge’i absolute ile relative bir .media ebeveynin içine koyun.
  3. Köşeye küçük bir fixed bildirim ekleyin — kaydırın ve yerinde kaldığını görün.
  4. Uzun kaydırılabilir bir bölümde top: 0 ile sticky etiket deneyin.
  5. Bir cümle yazın: absolute ne zaman fixed’ten daha güvenli?

Yaygın hatalar

  • Konumlandırılmış ebeveyn olmadan absolute kullanıp neden uzağa zıpladığını sormak
  • Sıradan sayfa düzeni için fixed’e sarılmak
  • Kaydırma taşması veya çakışan atalar olmadan sticky’nin çalışmasını beklemek
  • Bu dersi inline-block satır dersi gibi görmek (farklı iş)
  • Yerleştirme modlarını öğrenmek yerine buraya z-index veya float tarifleri dökmek

Özet

  • position akışa, atalara veya viewport’a göre yerleşimi kontrol eder
  • relative kaydırır ve çapalar; absolute o çapa içinde akışı terk eder
  • fixed viewport’a sabitler; sticky relative ve yapışkan davranışı karıştırır
  • Ofsetler yalnızca position static değilken önemlidir
  • Stacking ve float’ı sonraya bırakın — önce beş modu öğrenin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 37 / 37
Css Ders