Konumlandırma: relative absolute fixed sticky
İçeriği üst üste bindirmek, üst bilgileri sabitlemek ve sabit kenar çubukları oluşturmak için position değerleriyle öğeleri normal akıştan çıkarın.
Konumlandırma: relative absolute fixed sticky, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Normal Belge Akışı
Varsayılan olarak öğeler normal belge akışını izler: blok öğeler dikey olarak üst üste gelir, satır içi öğeler ise metin içinde yatay olarak akar. position özelliği, kaplamalar, sabit başlıklar ve araç ipuçları için bu akışın dışına çıkmanızı sağlar.
position: static (Varsayılan)
Her öğe position: static ile başlar. Bu, öğenin normal belge akışı tarafından konumlandırıldığı anlamına gelir. top, right, bottom ve left özelliklerinin statik öğeler üzerinde etkisi yoktur.
position: relative
position: relative, öğeyi normal akışta tutar; ancak top, right, bottom ve left kullanarak öğeyi özgün konumundan ötелеmenize olanak tanır. Daha da önemlisi, mutlak konumlandırılmış alt öğeler için bir konumlandırma bağlamı oluşturur.
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}position: absolute
position: absolute, öğeyi normal akıştan çıkarır. Öğe, en yakın konumlandırılmış ata öğesine (static dışındaki herhangi bir position değeri) göre konumlandırılır. Konumlandırılmış bir ata öğe yoksa görünüm alanına göre konumlandırılır.
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}z-index Özelliği
Konumlandırılmış öğeler üst üste gelebilir. Yığma sırasını denetlemek için z-index kullanınız. Daha yüksek z-index, üstte görünür. Yalnızca konumlandırılmış öğelerde çalışır (static öğelerde çalışmaz). Yeni bir yığınlama bağlamı oluşturur.
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}position: fixed
position: fixed, öğeyi normal akıştan çıkarır ve görünüm alanına sabitler. Öğe sayfayla birlikte kaymaz. Sabit başlıklar, kayan eylem düğmeleri ve çerez bantları için idealdir.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky
position: sticky karma bir davranıştır: öğe, bir eşiğe ulaşana kadar sayfayla birlikte kayar; eşik değerine ulaştığında sabitlenir. Uzun tablolardaki bölüm başlıkları veya başlıktan sonra sabitlenen kenar çubukları için kullanışlıdır.
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}position: absolute ile Ortalamak
Klasik bir teknik şudur: position: absolute; top: 50%; left: 50% ile transform: translate(-50%, -50%) değerlerini birlikte kullanarak bir öğeyi, konumlandırılmış ata öğesinin içinde tam olarak ortalayabilirsiniz.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}Taşma, Mutlak Konumlandırılmış Alt Öğeleri Kırpar
Mutlak konumlandırılmış bir alt öğe, varsayılan olarak ata öğesinin sınırlarını aşabilir. Ata öğeye overflow: hidden eklemek, kutusunun dışındaki her şeyi kırpar. Bu özellik kart görseli efektleri ve rozet kırpma için kullanışlıdır.
Dikkat: İstenmeyen Yığınlama Bağlamları
Bazı özellikler istemeden yığınlama bağlamları oluşturur: transform, filter, isolation: isolate. Bu durum, bir z-index: 9999 öğesinin daha düşük bir yığınlama bağlamının içinde bulunduğu için başka bir öğenin arkasında kalabildiği z-index çatışmalarına yol açabilir.
Her Konumlandırma Türü Ne Zaman Kullanılmalı
relative: ofsetler ve konumlandırma bağlamı. absolute: bir ata öğeye göre rozetler, ipuçları ve kaplamalar. fixed: kalıcı başlıklar, kip pencereleri ve kısa bildirimler. sticky: bölüm başlıkları ve kaydırmayı takip eden kenar çubuğu gezintisi. Düzenler için position kullanmaktan kaçınınız; Flex veya Grid kullanınız.
Kısa Kontrol
Bir öğede position: absolute; top: 0; right: 0; bulunuyor. Ata öğesinde position: relative varsa öğe nerede görünür?
Özet: CSS Konumlandırma
static varsayılandır. relative, akıştan çıkmadan ofset uygular ve bir konumlandırma bağlamı oluşturur. absolute, akıştan çıkar ve en yakın konumlandırılmış ata öğeye göre konumlandırılır. fixed, görünüm alanına sabitlenir. sticky, kayar ve ardından sabitlenir. Üst üste gelme sırasını denetlemek için z-index kullanınız.
Sıkça Sorulan Sorular
“Konumlandırma: relative absolute fixed sticky” dersi ücretsiz mi?
Evet — “Konumlandırma: relative absolute fixed sticky” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Konumlandırma: relative absolute fixed sticky” dersinde ne öğreneceğim?
İçeriği üst üste bindirmek, üst bilgileri sabitlemek ve sabit kenar çubukları oluşturmak için position değerleriyle öğeleri normal akıştan çıkarın. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 4. dersidir.
“Konumlandırma: relative absolute fixed sticky” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Seçiciler ve Basamaklandırma
- Renkler, Tipografi ve Kutu Modeli
- Display: block inline flex grid Temelleri
- Konumlandırma: relative absolute fixed sticky