CSS Position Özelliği

Bu yazımızda, sayfa üzerinde çeşitli konumlandırmalar yapmak için kullanılan, position özelliğini ve aldığı değerleri ayrıntıları ile açıklayacağız. Bunun ile birlikte z-index ve left, right, top, bottom gibi yardımcı özelliklere de değineceğiz.

  • position: static;
  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: sticky;
  • left, right, top, bottom
  • z-index

position: static;

Position özelliğinin varsayılan değeridir. Sayfa akışında bir yer kaplar ve başka bir öğenin üstüne taşmaz. position: static; değerine sahip bir öğeye; z-index ve left, right, top, bottom özellikleri ile konumlandırma yapılamaz.

position: relative;

Öğenin mevcut konumuna göre konumlandırma yapmak için kullanılır. Static değerinde olduğu gibi sayfa akışında bir yer kaplar ve konumu değiştirilse bile ilk bulunduğu yerdeki boşluk kalır. position: relative; değerine sahip bir öğeye; z-index ve left, right, top, bottom özellikleri ile konumlandırma yapılır. Örneğin relative bir öğeye top: 15px değeri eklendiğinde mevcut konumundan 15px aşağıya itilir.

position: absolute;

Bir üst öğeye yani ebeveyn öğeye göre konumlandırma yapmak için kullanılır. Eğer bir üst öğe yok ise <body> etiketi ebeveyn kabul edilir. position: absolute; değerine sahip bir öğeye; Z-index ve left, right, top, bottom özellikleri ile konumlandırma yapılır. Position değeri absolute olan öğeler sayfanın akışından çıkartılır ve bulundukları yerde bir boşluk kalmaz. Absolute tanımlanan öğe otomatik olarak left: 0 ve top: 0 pozisyonuna taşınır. Absolute değere sahip bir öğeye top: 15px değeri eklenirse içerisinde bulunduğu ebeveyn etiketin üst sınırı baz alınarak 15px aşağıya yerleştirilir. Ayrıca eklemek gerekirse, absolute değeri genellikle relative değerine sahip ebeveynlerle birlikte kullanılır.

position: fixed;

Sayfanın görüntü alanına göre konumlanır. Sayfa kaydırıldığında görüntüden kaybolmaz ve mevcut yerini korur. Z-index ve left, right, top, bottom özellikleri ile konumlandırma yapılır. Position değeri fixed olan öğeler, ilk bulundukları yerde bir boşluk bırakmazlar.

position: sticky;

Genellikle fixed ile karıştırılır. Sticky, sayfa kaydırılmadan önce relative gibi davranır ve mevcut konumunda kalır. Ancak, sayfa kaydırıldığında fixed gibi davranır yani sayfa ile birlikte kayar.

Aşağıdaki link üzerinden sticky’nin çalışma şeklini görebilirsiniz.

https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

left, right, top, bottom

Position değeri static olan öğeler hariç tüm position değerleri ile birlikte çalışır. Left sola uzaklık, right sağa uzaklık, top üste uzaklık, bottom alta uzaklık belirler. Örneğin static olmayan bir öğeye top: 25px değeri verilirse üst taraftan 25px itililir.

z-index

z-index özelliği, sayfa akışından çıkarak konumlandırılmış ve üst üste gelmiş öğelerin hangisinin arkada hangisinin önde görüleceğini belirlemek için kullanılır. z-index değeri yüksek olan önde olur, daha düşük olan ise arkada olur. z-index, negatif değerler alabilir. İki öğe çakışırsa ve z-index belirtilmemişse HTML belgesinde daha sonra tanımlanan daha üsttedir.

Yorum Yap