Merhaba,
CSS de position kullanımına dair birkaç bilgilendirme yazma gereksinimi duyuyorum.
"left right top bottom" gibi kodlar kendi başına neden çalışmıyor gibi sorular aldığımdan, konuyu ele almak gerekti.
Yukarıdaki terimle konumlandırma yapmak için kullanılır. Peki neyin konumlandırması? burada da, position'un karşılığında verdiğin değer devreye girer.
Web de position için kullanılan aşağıdaki değerler mevcut. İsimleri üzere aşikarlar yinede hepsine değinelim.
Eğer yapınızda hiç poition kullanmadıysanız tüm yapınız body hariç hepsi varsayılan olarak static değer taşır. body ana kapsayıcımız olduğundan relative değerini taşır. burada html de aynı kalibrede der gibisiniz. body dışına çıktığınızda ekran dışına çıktığınız için orayı saymıyorum. Genelde html'e kök işlemler için stilleme yazılır. örn: "font-size:100%" ya da "font-size:16px".. gibi. Tüm yapımızda position default olarak static olduğunu belirttik. bunun dışında kullanacağınız diğer tüm position değerlerinde konumlandırma stillerini yani "left right top bottom" değerlerini verebilirsiniz çalışacaktır. Eğer tagınız diviniz sınıfınız artık neyiniz var ise still olarak static durumda ise konumlandırma stilleriniz çalışmayacaktır. relative, absolute, fixed ve sticky kullandığınızda "left right top bottom" stillerini yedirebilirsiniz. Peki bunlar kendi başlarına ne işe yararlar? isimlerine en uygun csslerden bazıları:D
sticky genelde sidebar yapılarında kullanırlar, mutlaka görmüşsünüzde sağda ya da solda bir yapı olur ve ekranı kapsayıcısının alanı müsade ettiği kadar takip eder. Kapsayıcısı bittiği zaman ekrandan gider.
fixed ise her zaman ekranda kalır. Bir yapıya fixed top 0 derseniz. o her zaman ekranın üstünde takılır.
absolute verirseniz bu elemana verdiğiniz left top right bottom değerleri bu elemanı kapsayıpta "static" değeri dışında bir değere sahip olan bir yapı bulana kadar yukarı bakar, bulur ise oraya yapışır bulamaz ise body'nin relative olduğunu söylemiştik, gider ona yapışır. Bir örnek verelim. iç içe 5 divimiz var ve 5. olan absolute left 0 , 2. olan ise relative, bu durumda en içteki absolute olan gelip 2. divi kapsayıcı olarak görecektir. aradaki 3. ve 4. divler yokmuş gibi davranacaktır.
Geldik relative, abimiz kapsayıcımız ben burdayım diyen delikanlı relativeee.
Relative verirseniz içerisinde bulunan absolute yapıların konumlandırmalarını bu verdiğiniz yapıya göre hizalamış olursunuz..
Tüm bunların dışında ayrıca bir bilgi daha, overflow kodu da static dışındaki pozisyon kodlarıyla birlikte çalışır. overflow hidden gibi bir kodu static durumundaki bir yapıda çalıştıramazsınız illaki relative absolute sticky ya da fixed vermeniz gerekir.