Css Position Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te position özelliğini öğreneceğiz.Position özelliği ile html sayfamızdaki nesnelerin konumları değiştirebilir ve dilediğimiz gibi yerleştirmeler yapabiliriz.Bu özellik beş değer alır.Bunlar :

1 – position : static; => Html etiketleri varsayılan olarak static değer alır ve sayfanın normal akışına göre konumlandırılırlar.

Dikkat : Bu durumda html etiketlerine top, right, bottom ve left özellikleri etki etmez.

Örneğin bir <div> etiketi tanımlayalım ve left:100px, top:60px verelim.Gördüğünüz gibi static olduğundan top ve left değerleri etki etmedi.

2 – position : relative; => Bu durumda html etiketleri yine sayfanın normal akışına göre konumlandırılırlar.Fakat top, right, bottom ve left özelliklerinden etkilenirler.Örneğin bir <div> etiketi tanımlayalım ve soldan 100px, yukardan 60px uzaklaşmasını sağlayalım.

3 – position : fixed; => Bir html etiketine fixed değeri verdiğimiz zaman o etiketin sayfanın belli bir noktasında sabitlenmesini sağlayabiliriz.Örneğin web sitelerinde görürsünüz, siz scroll ile sayfanın aşağısına indiğinizde bile sayfanın menü kısmı hep yukarda görünür.Bu gibi sabitlemek istediğimiz nesnelere position:fixed özelliğini uygularız.Top, right, bottom ve left özelliklerinden etkilenirler.Şimdi bir <div> tanımlayalım ve sayfanın sağ alt köşesinde sabitlenmesini sağlayalım.scroll ile aşağı indiğinizde bile bu <div> sürekli görünecektir.

4 – position : absolute; => Bir html etiketine absolute değeri verdiğimiz zaman, o etiket normal akış içerisinden çıkar.Relative’den farkı normal akış içerisinden çıkmasıdır.Top, right, bottom ve left özelliklerinden etkilenirler.Bu özelliği en çok relative özelliğe sahip bir etiket içerisindeki etikete verip konumlandırılmasını sağlamak için kullanırız.Örneğin 2 adet <div> oluşturalım ve dıştaki div’e relative içteki div’e absolute değeri verelim.İçteki div’e vereceğimiz top, left değerleri relative özelliğine sahip div baz alınarak uygulanacaktır.

5 – position : sticky; => Bir html etiketine sticky değeri verdiğimiz zaman, o etiketin istediğimiz değerlerde sabit kalmasını sağlayabiliriz.Örneğin bir <p> etiketi tanımlayalım ve bu <p> etiketi ne zamanki yukardan 40px lik mesafeye ulaşırsa, orda sabitlenmesini sağlayalım.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 14 – Overflow Kullanımı

Sonraki : Css Dersleri 16 – Box Model (Kutu Modeli)

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +