Bu yazımızda Css’te Position özelliği nedir? onu öğ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.
Önemli 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div { width: 70px; height: 70px; background-color: cornflowerblue; position: static; left: 100px; top: 60px; } </style> <div>static</div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div { width: 80px; height: 80px; background-color: cornflowerblue; position: relative; left: 100px; top: 60px; } </style> <div>relative</div> |
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 etiketi 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> div { width: 70px; height: 70px; background-color: cornflowerblue; position: fixed; bottom: 30px; right: 30px; } </style> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <div>fixed</div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<style> #relative { width: 200px; height: 200px; background-color: cornflowerblue; position: relative; left: 50px; top: 50px; } #absolute { width: 70px; height: 70px; background-color: red; position: absolute; left: 90px; top: 30px; } </style> <div id="relative"> relative <div id="absolute"> absolute </div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> p { position: sticky; top: 60px; } </style> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <p>Bu p etiketi yukardan 40px lik mesafeye ulaştığında sabitlenecektir.</p> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
