Ö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.