Özet - Üst bilgi düzeni

Display ve position özellikleriyle üst bilgi düzeni kurarsın.

Üst bilgi düzeni planı

Bu özette display ve position kavramlarını birleştirip bir üst bilgi (header) düzeni kuracaksın. Üst bilgi genellikle başlık, menü ve bir rozet içerir; her parça farklı display ve position değerleri ister.

Plan: önce üst bilgi kabı position: relative alır; sonra menü display: inline-block ile yan yana dizilir; son olarak rozet position: absolute ile sağ üst köşeye yapışır.

Üç kavram iç içe geçer

Bu düzende üç kavram iç içe çalışır. display: inline-block menü ögelerini yan yana dizer ama genişlik ve yükseklik verilebilir kılar. position: relative kabı, içindeki position: absolute rozet için kapsayıcı blok olur.

Böylece rozet top: 0 ve right: 0 ile kabın sağ üst köşesine yerleşir. Üç bildirim birlikte çalışır.

Uygulama Üst bilgi kabını kur

Bir header.top sınıf seçicisi yaz ve şu üç bildirimi tanımla: position: relative, padding: 1rem, background: whitesmoke. Böylece üst bilgi kabı rozet için kapsayıcı blok olur.

Örnek çözümü göster

/* üst bilgi kabı */
header.top {
  position: relative;
  padding: 1rem;
  background: whitesmoke;
}

Uygulama Menü ve rozet stillerini ekle

İki stil bloğu ekle. Birincisi header.top nav a alt seçici; display: inline-block ve padding: 0.25rem 0.5rem tanımlasın. İkincisi header.top .badge alt seçici; position: absolute, top: 0, right: 0 tanımlasın.

Örnek çözümü göster

/* menü ve rozet stilleri */
header.top nav a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}
header.top .badge {
  position: absolute;
  top: 0;
  right: 0;
}

Kendini test et

Bu düzende rozet nereye yapışır?
```
header.top {
  position: relative;
}
header.top .badge {
  position: absolute;
  top: 0;
  right: 0;
}
```
- Tarayıcı penceresinin sol üst köşesine
- Belge akışında kendi yerine
- header.top kabının sağ üst köşesine
- Sayfanın altına
Cevabı göster

header.top kabının sağ üst köşesine — Doğru. header.top position: relative olduğu için rozetin kapsayıcı bloğu odur; top:0 right:0 sağ üst köşeye yerleştirir.

Sıradaki ders: Overflow visible ve hidden

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler