Meydan okuma - Düzen temelleri

Display ve position ile basit bir sayfa düzeni kurarsın.

Display ve position'ı hatırla

Sayfa düzeni display ve position ile başlar. display: block bir öğeyi tam satır kaplatır; display: inline-block satır içi dururken genişlik ve yükseklik almayı sağlar. Bu ikisi başlangıç seviyesinde en sık kullanılan düzen tuğlalarıdır.

position: relative öğeyi normal akışta tutar ama top, right gibi değerlerle kaydırır. position: absolute ise öğeyi en yakın konumlu atasına göre yerleştirir; bu yüzden genellikle relative bir kabın içine koyulur.

Uygulama Sayfa düzenini kur

Bir .header sınıf seçicisi ekle. position özelliğini relative, padding özelliğini 1rem, background özelliğini #1a1a2e, color özelliğini #fff yap. Sonra .header .badge seçicisi ekle: display özelliği inline-block, position özelliği absolute, top özelliği 0, right özelliği 1rem olsun.

Örnek çözümü göster

/* sayfa düzeni */
.header {
  position: relative;
  padding: 1rem;
  background: #1a1a2e;
  color: #fff;
}
.header .badge {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 1rem;
}

Düzen ipuçları

Başlangıç seviyesinde en sık kullanılan düzen örüntüsü şudur: kapsayıcıya position: relative verilir, içindeki rozet ya da simge position: absolute ile köşeye yerleştirilir. Böylece ana akış bozulmadan küçük öğeler üst köşeye, köşeye konabilir.

display: inline-block ise buton, rozet ve etiket gibi küçük kutuları satır içinde yan yana dizmek için idealdir. Metin hizalaması için text-align: center yeter; kartlar büyük kutu olduğunda onun yerine block kullanılır.

Kendini test et

display: inline-block neyi sağlar?
```
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  width: 80px;
}
```
- Satır içi kalırken genişlik ve yükseklik alır
- Öğeyi yeni satıra taşır
- Öğeyi tamamen gizler
- Yerini en yakın atanın üstüne alır
Cevabı göster

Satır içi kalırken genişlik ve yükseklik alır — Doğru. inline-block satır içi dururken width/height ve padding öğeleri uygulanır.

Rozeti kaba göre konumlandırmak için değeri tamamla

.header {
  position: relative;
}
.header .badge {
  position: ____;
  top: 0;
  right: 1rem;
}

Cevabı göster

.header {
  position: relative;
}
.header .badge {
  position: absolute;
  top: 0;
  right: 1rem;
}

Display ve position değerini rolüyle eşleştir

block

Tam satır kaplayan kutu
inline-block

Satır içi ölçülü kutu
relative

Akışta kalan, kayan konum
absolute

Ataya göre sabit konum

Sıradaki ders: Meydan okuma - Başlangıç projesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler