Position Stilleri

1.

Position: Position özelliği elementlerin tarayıcıya göre ya da birbirleri arasında konumlandırılması için kullanılır. Varsayılan değer Static değeridir.

Position: relative;

Static, Relative, Absolute, Fixed, Sticky değerlerini alır.

•

Static :Html etiketleri başlangıç ayarı yani varsayılan olarak static biçimde davranış gösterirler. Yani normal akış içinde birbirlerinden etkilenerek davranış gösterirler. ** Static nesneler için top, right, bottom ve left konumlandırma özellikleri kullanılamaz.

•

Relative :Bir nesneye position:relative; dediğimizde nesne gene normal akış içerisinde olmaya devam eder ancak top, right, bottom ve left özelliklerini kullanma fırsatı verir. Margin değeri bu yapıda kullanılabilir. Aynı zamanda kendi alanı içindeki absolute yapıları tutar.

•

Absolute :Kendisini kapsayan bir üst öğeye relative konumlanmışsa öğeye göre konum almaktadır. Böyle bir eleman bulunmazsa, nesne web sayfasına göre konumlanacaktır. top, right, bottom ve left değerleri ile konum alır. Margin değeri uygulamaz.

•

Fixed: Sabitlenmiş bir eleman tarayıcı penceresine göre konumlandırılmıştır. Pencere kaydırılmış olsa bile hareket etmeyecektir. Hem marginle konum alırken hemde top, right, bottom ve left değerleri ile konum alır.

•

Sticky :Yapışkan öğe göreceli ve sabit, kaydırma konumuna bağlı arasında geçiş yapar. Oluşturulan eleman kaydırma çubuğu gelene kadar position:relative gibi davranır, kaydırma çubuğu geldikten sonra position:fixed gibi davranır.

2.

Top: Üstten konum. Absolute , Fixed, sticky olan yapının üstten konumu için kullanılır.

Top: 100px; (Px, pt, em %...... gibi değerlerle değer alır.)

3.

Left: Soldan konum. Absolute , Fixed, sticky olan yapının soldan konumu için kullanılır.

left: 100px; (Px, pt, em %...... gibi değerlerle değer alır.)

4.

Bottom: Alttan konum. Absolute , Fixed, sticky olan yapının alttan konumu için kullanılır.

bottom: 100px; (Px, pt, em %...... gibi değerlerle değer alır.)

5.

Right: Sağdan konum. Absolute , Fixed, sticky olan yapının sağdan konumu için kullanılır.

right: 100px; (Px, pt, em %...... gibi değerlerle değer alır.)

6.

Z-index : Position Absolute olanların önde ve geride olma sıralamasını belirler.

z-index: 1000; (en önde olan en büyük z-index değerine sahip olmalıdır.)