Sabit başlık (Sayfayı kaydırın)
CSS konumlandırma özellikleri: Detaylı rehber
Web tasarımında öğelerin sayfa üzerindeki yerleşimini belirlemek, estetik ve işlevsel bir kullanıcı deneyimi için kritik öneme sahiptir. CSS'in konumlandırma özellikleri, bu yerleşim üzerinde hassas kontrol sağlamamıza olanak tanır. Bir öğenin normal belge akışındaki davranışını tamamen değiştirebilen bu özellikler, karmaşık düzenler oluşturmaktan menüler, modallar veya sabit başlıklar gibi etkileşimli bileşenler geliştirmeye kadar geniş bir yelpazede kullanılır. Bu yazıda, static, relative, absolute, fixed ve sticky gibi temel konumlandırma değerlerini, bunlarla birlikte kullanılan top, right, bottom, left özelliklerini detaylı örneklerle inceleyeceğiz. Ayrıca, öğelerin üst üste binme sırasını kontrol eden z-index ve onun temelini oluşturan stacking context kavramlarını da derinlemesine açıklayacağız.
CSS konumlandırma temellerini anlama
CSS konumlandırma, bir HTML öğesinin belge akışı içindeki yerleşimini nasıl etkileyeceğini belirler. Her HTML öğesi varsayılan olarak bir konumlandırma değerine sahiptir ve bu değer genellikle static'tir. Bu varsayılan davranış, öğelerin tarayıcı tarafından belirlenen sıraya göre, yani normal belge akışına uygun şekilde yerleştirilmesi anlamına gelir.
position: static;
static, tüm HTML öğelerinin varsayılan konumlandırma değeridir. position: static; olarak belirlenmiş bir öğe, normal belge akışında kalır ve top, right, bottom, left özelliklerinden etkilenmez. Bu özellikler, static konumundaki bir öğe üzerinde hiçbir görsel değişiklik yaratmaz. Öğeler, doğal olarak belge içinde birbirini takip ederler. Bu durum, çoğu zaman özel bir konumlandırma yapılması istenmediğinde veya diğer konumlandırma değerleri için bir referans noktası olarak kullanılır. Aşağıdaki örnekte, kutunun normal akışta nasıl durduğunu ve herhangi bir kaydırma yapmadığını görebilirsiniz.
Yukarıdaki kutu normal akışta duruyor.
position: relative;
relative konumlandırma, öğenin normal belge akışındaki yerini korumasını sağlar, ancak top, right, bottom veya left özellikleri kullanılarak kendi orijinal konumuna göre kaydırılabilir. Bir relative öğe, kaydırılsa bile orijinal yerinde hala bir boşluk kaplar. Bu özellik, genellikle diğer absolute konumlandırılmış öğeler için bir "konumlandırma bağlamı" (containing block) oluşturmak için kullanılır, bu konuya birazdan değineceğiz.
Örneğin, position: relative; top: 20px; left: 30px; ile bir öğe, orijinal konumundan 20 piksel aşağıya ve 30 piksel sağa kaydırılır. Diğer öğeler bu kaymadan etkilenmez ve öğenin orijinal yerini doldurur gibi davranır.
Aşağıdaki kutu, normal akışta yerini koruyarak kendi orijinal konumundan kaydırıldı.
Bu metin, relative kutunun orijinal yerini doldurur gibi davranır.
Absolute konumlandırma ve içeren bloğu
position: absolute;
absolute konumlandırma, web tasarımında en güçlü ve bazen kafa karıştırıcı özelliklerden biridir. Bir öğeye position: absolute; verildiğinde, bu öğe normal belge akışından çıkarılır. Bu, diğer öğelerin bu öğe yokmuş gibi davranacağı ve onun yerini doldurmak için yeniden düzenleneceği anlamına gelir. absolute konumlandırılmış bir öğenin konumu, top, right, bottom ve left özellikleri kullanılarak belirlenir. Ancak, bu değerler her zaman viewport'a göre değil, genellikle en yakın konumlandırılmış üst öğeye (ancestor) göre belirlenir.
Bu "en yakın konumlandırılmış üst öğe" kavramı, containing block olarak bilinir. Bir öğenin absolute olarak konumlandırılması durumunda, top, right, bottom, left değerleri, position değeri static olmayan (yani relative, absolute, fixed veya sticky olan) ilk üst öğeye göre hesaplanır. Eğer böyle bir üst öğe yoksa, öğe başlangıçta initial containing block olarak bilinen <html> öğesine (genellikle tarayıcının görüntüleme alanı viewport'a karşılık gelir) göre konumlandırılır. Bu nedenle, absolute bir öğeyi belirli bir alana sabitlemek için, genellikle o alanın kapsayıcı öğesine position: relative; vermeniz gerekir.
Aşağıdaki örnekte, kırmızı kutu, kapsayıcısı olan mavi noktalı kutuya (position: relative;) göre konumlandırılmıştır.
Fixed ve sticky konumlandırma: Yerinde kalma
position: fixed;
fixed konumlandırma da absolute gibi öğeyi normal belge akışından çıkarır. Ancak, absolute'un aksine, fixed konumlandırılmış bir öğe her zaman tarayıcının görüntüleme alanına (viewport) göre konumlandırılır. Bu, sayfa yukarı veya aşağı kaydırılsa bile öğenin ekran üzerinde sabit kalacağı anlamına gelir. Sabit başlıklar, altbilgiler, menüler veya kenar çubuğu reklamları gibi elemanlar için idealdir. top, right, bottom, left değerleri, viewport'un kenarlarından olan mesafeyi belirler.
Sayfanın en üstünde gördüğünüz "Sabit Başlık", position: fixed; kullanımının klasik bir örneğidir.
position: sticky;
sticky konumlandırma, relative ve fixed konumlandırmanın bir birleşimidir. Öğeler, başlangıçta normal akışta relative gibi davranır, ancak kullanıcı belirli bir kaydırma eşiğine ulaştığında (örneğin, top: 0; belirlenmişse öğe viewport'ın üstüne ulaştığında), fixed gibi davranarak yerinde sabitlenir. Bu, kaydırmaya duyarlı navigasyon çubukları veya kategori başlıkları gibi öğeler oluşturmak için kullanışlıdır. sticky konumlandırmanın çalışması için, mutlaka bir top, right, bottom veya left değeri belirtilmelidir. Ayrıca, sticky öğenin bir kaydırma mekanizması olan bir üst öğesi içinde veya doğrudan body içinde olması gerekebilir.
Aşağıdaki kaydırılabilir kutu içinde, sarı başlık sayfanın üstüne ulaştığında sabitlenir.
Bu, sticky başlığın içindeki kaydırılabilir içeriktir.
Burada uzun bir metin veya başka elemanlar olabilir.
Kaydırma çubuğunu aşağı kaydırdığınızda, "Sticky Başlık" kaydırma alanı içerisinde sabitlenecektir.
Bu özellik, özellikle uzun sayfalarda belirli bir bölümün başlığını veya önemli bir navigasyon elemanını görünür tutmak için harikadır.
İçerik devam ediyor...
...
...
Daha fazla içerik...
En alt kısım.
Z-index ile yığınlama sırasını ve yığınlama bağlamını kontrol etme
Web sayfasındaki öğeler sadece x (yatay) ve y (dikey) eksenlerinde değil, aynı zamanda z (derinlik) ekseninde de üst üste binebilirler. Bu yığınlama sırasını kontrol etmek için z-index özelliği kullanılır.
z-index
z-index, position değeri static dışında olan (yani relative, absolute, fixed veya sticky) öğelerin birbirleri üzerindeki yığınlama sırasını belirler. Daha yüksek z-index değerine sahip bir öğe, daha düşük z-index değerine sahip bir öğenin önünde görünür. Eğer iki öğenin z-index değeri aynıysa veya belirtilmemişse, HTML'deki son yazılan öğe diğerinin üzerinde görünür. z-index sadece konumlandırılmış öğeler üzerinde etkilidir.
Aşağıdaki örnekte, kutuların üst üste binme sırası z-index değerlerine göre belirlenmiştir.
Yığınlama bağlamı (stacking context)
z-index'in davranışını tam olarak anlamak için yığınlama bağlamı (stacking context) kavramını bilmek esastır. Bir yığınlama bağlamı, bir HTML belgesinin veya bir öğenin içinde, öğelerin z ekseninde nasıl sıralanacağını belirleyen üç boyutlu bir yerel ortamdır. Bir kez bir yığınlama bağlamı oluşturulduğunda, o bağlam içindeki öğelerin z-index değerleri yalnızca o bağlamın kendi içinde anlamlı olur ve diğer yığınlama bağlamlarındaki öğeleri doğrudan etkileyemez.
Yeni bir yığınlama bağlamı oluşturan yaygın durumlar şunlardır:
- Kök öğe (
<html>) her zaman bir yığınlama bağlamı oluşturur. positiondeğeristaticdışında olan vez-indexdeğeriautodışında bir sayı olan öğeler (örneğinposition: relative; z-index: 1;).opacitydeğeri 1'den az olan öğeler.transform,filter,perspective,clip-pathgibi CSS özellikleri uygulanan öğeler.will-changeözelliği ile belirli özellikler belirtilen öğeler.
En önemli çıkarım şudur: bir yığınlama bağlamı içinde bir öğenin z-index değeri ne kadar yüksek olursa olsun, o öğe kendi üst öğesinin (yığınlama bağlamının) z-index'ini geçemez ve dolayısıyla farklı bir yığınlama bağlamındaki daha düşük z-index'e sahip bir öğenin önüne geçemez.
Aşağıdaki örnek, yığınlama bağlamlarının z-index'i nasıl etkilediğini göstermektedir. Parent 1'in z-index'i Parent 2'den yüksek olduğu için, Parent 2'nin çocukları ne kadar yüksek z-index değerine sahip olursa olsun Parent 1'in çocuklarının önüne geçemez.
Parent 1 (z-index: 10)
Parent 2 (z-index: 5)
Görüldüğü gibi, "Child 2"nin z-index: 1000; olmasına rağmen, kendi yığınlama bağlamı olan "Parent 2"nin (z-index: 5;) önüne geçememektedir. "Parent 1" (z-index: 10;) tüm "Parent 2" ve çocuklarının üzerinde yer alır, çünkü kendi yığınlama bağlamının z-index değeri daha yüksektir.
CSS konumlandırma özellikleri, web geliştiricilerine sayfadaki öğelerin yerleşimi üzerinde muazzam bir kontrol sağlar. static varsayılan davranışı sürdürürken, relative öğenin kendi orijinal yerinden göreceli olarak kaydırılmasına olanak tanır. absolute, öğeyi normal belge akışından çıkarır ve en yakın konumlandırılmış üst öğeye göre konumlandırılmasını sağlar, bu da yerleşimde esneklik sunar. fixed, öğeleri tarayıcı penceresine sabitleyerek kullanıcının kaydırmasından bağımsız olmalarını garantilerken, sticky dinamik bir sabitleme sunarak kullanıcı deneyimini zenginleştirir. Ayrıca, z-index, üst üste binen öğelerin derinlik sırasını belirlemede hayati bir rol oynar, ancak bu, yığınlama bağlamı kavramı anlaşıldığında tam potansiyeliyle kullanılabilir. Bu kavramlar, modern ve duyarlı web arayüzleri oluşturmak için temel yapı taşlarıdır ve doğru kullanıldığında estetik ve işlevsellik açısından zengin tasarımlara kapı aralar. Bu özelliklerde uzmanlaşmak, web geliştirme becerilerinizi önemli ölçüde geliştirecektir.
Resim Sahibi: Tima Miroshnichenko
https://www.pexels.com/@tima-miroshnichenko