CSS position Kuralı
Web nesnelerinin ekran üzerindeki yerleşimlerini belirler.
Burada CSS ile konumlandırma hakkında bilgi vermeye çalışacağız.
Konumlandırma ile alakalı olduğu için blok-level ve inline-level elementlerin tanımını tekrarlayacağız.
Blok-level elementler
Blok-level elementingörünüş formatı bir kutu gibidir. Blok-level elementler inlineelementleri ve diğer blok-level elementleri içerebilir. Tipiközellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li
Inline-level Elementler
Inline-level elementler biriçerik gibi görünür, diğer bir inline elelementiiçerebilir. Yeni satır veya boşluk oluşturmazlar. Örnek: a, strong,span
Ancak bizbu elementlerin başlangıç değerlerini display özelliği ile değiştirebilriz. Yani biz bir inline-level element olan bir linki(<a>....</a>) blok-level bir elemente dönüştürebiliriz. Aynı şekilde bilr blok-level elementi inline elemente dönüştürebilriz.
CSS'deüç temel konumlandırma şekli vardır: normal akış(position:static ve position:relative), float ve mutlak konumlar(position:absolute). Tüm elementler başlangıçta normal akış şeklindekonumlandırılmıştır.
Normal Akış: {position: static}
Eğer sayfalardaki elementlere herhangi bir konumlandırma yapılmamış ise veya float değeri verilmemiş ise sayfaya normal akış konumlandırması uygulanır. Sayfa ilk element en üstte son elementte en sonda olacak şekilde sıra ile aşağı doğru sıralanacaktır.
Inlene kutular yatay olarak tasarlanır. Yatay boşluk margin, padding ve kenarlıkla hesaplanır. Bu nedenle dikey margin, padding ve kenarlık değerleri etkisizdir.
Taga verilen top, left, right, bottom gibi parametrelerdeki değerler dikkate alınmaz.
Mutlak(Absolute) Konumlandırma
Göreceli konumlandırma Normal Akış'ın bir parçasıdır. Aksine Mutlak Konumlandırmada uygulanan element bulunduğu yere boşluk bırakmayacaktır. Diğer elementler normal akıştaki yerlerini bu elementi yoksayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi
Eğer bir ata elementin konumu belirlenmemişse elementimiz ana bloka göre konumalanacaktır. Mutlak konumlandırma HTMLelementi ve sayfa çözünürlüğünü ile ilişkilidir.
Mutlak Konumlandırma ile yerleştirilmiş element sayfada elementi normal akışın dışına çıkarır. Bu element diğer elementlerinüzerine binecektir. Bu üstte kalma altta kalma işinide z-index özelliğiile hallede bilriz. z-index değeri büyük olan element üstte küçük olan element ise altta kalacaktır.
Mutlak konumlandırılmış Tag, eğer top, left, right, bottom değeri verilmişse bu değere uyacak, verilmemişse bu degerleri 0 kabul edip ona göre davranacaktır.
Göreceli Konumlandırma: {position: relative}
Göreceli konumlandırma anlaşılması kolay bir konsepttir. Bir elemente göreceli bir değer verdiğiniz de o bulunduğu yeri dikkate alarak verilen değerleri uygulayacaktır. Bir elementin(göreceli) başlangıç noktasını dikey ve yatay olarak değiştirebilriz. Eğer biz elementin üst(top) değerine 20px tanımlarsak element bulunduğu yerden 20px aşağıya kayacaktır, eğer elementin sol(left) değerini 20px olarak tanımlarsak elementimiz soldan 20px sağa doğru kayacaktır.
Göreceli konumlandırma kullanılarak yeri belirlenen bir elementin başlangıçtaki konumundaki boşluğu ve diğer elementlerle arasındaki mesafeyi koruyacaktır.
position Kuralının Alabileceği Değerler
| Değer | Açıklma | Dene |
|---|---|---|
| static | Varsayılan değer. Elements render in order, as they appear in the document flow | Dene» |
| absolute | The element is positioned relative to its first positioned (not static) ancestor element | Dene » |
| fixed | The element is positioned relative to the browser window | Dene » |
| relative | The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position | Dene » |
| initial | Sets this property to its default value. Read about initial | Dene » |
| inherit | Inherits this property from its parent element. Read about inherit |
Kaynaklar: