Çevrimdışı

CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:

static - Hiçbir özellik belirtilmediyse
fixed - Sabit, tarayıcıya göre hareket etmeyen element
relative - Normal olması gereken pozisyona göre konum belirlemek
absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek
static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.

fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).

p.fixed
{
position: fixed;

top: 30px;
right: 5px;
}


Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.

relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.

h2
{
position: relative;

left: -20px;
}


Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.

absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:

h2
{
position: absolute;

left: 100px;
top: 150px;
}


Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.

z-index: Elementin Önceliğini Belirlemek

Nasıl Photoshop tarzı programlarda katmanlarla çalışılıyor ve katmanların sırası belirlenebiliyorsa, CSS'de de z-index özelliği ile bunu belirleyip bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz.

img
{
position: absolute;

left: 0px;
top: 0px;

z-index: -1;
}


Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır) olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul edilecektir.

Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder. Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha büyük olan -2 özelliğine sahip element daha üstte görünecektir.

__________________

Bu kez pek bir afili yalnızlık, ağlatan bir kadın kadar düşman. Ağzı bozuk üstelik bırakmıyor acıtmadan.