CSS Position Özelliği

Kişisel bloğumda bu yazıma kadar sizlere birsürü CSS özelliğinden bahsettim. Bu yazımda da CSS’in position özelliğinden ve alabileceği değerler hakkında konuşacağım. O halde geçelim…

CSS’de position özelliği, elemanların yerleşimlerini kontrol etmemizi sağlar. Elemanlar sayfa içerisinde belirli bir akış içerisindedir. İşte bu akışa position özelliği ile müdahale edebiliyoruz. Position özelliği 5 farklı değer almaktadır.

static | relative | absolute | fixed | sticky

Haydi tek tek kısaca bu özelliklerden bahsedelim.

Static (Default)

Static, position özelliğinin alabileceği varsayılan değerdir. Yani tüm elementler varsayılan olarak static özelliğiyle konumlandırılırlar.

Örnek kullanım:

position: static;

Top, left, bottom, right ve z-index özellikleri position: static; ile beraber çalışmaz.

Top, left, bottom ve right özellikleriyle CSS’de elemanların pozisyonlarını değiştirebiliyoruz. Static hariç position özelliğinin alabileceği tüm değerlerde top,left, bottom, right özelliklerini kullanabiliyoruz. Ayrıyeten position ile bilhassa beraber kullandığımız z-index katman özelliğinden de bu yazımın içinde bahsedeceğim. Geçelim position: relative özelliğine…

Relative

Bu özelliği kullandığımızda elemanlar normal akışında devam eder top, left, bottom, right ve z-index gibi özellikler de kullanılabilir hale gelir.

.kutu {
  position: relative;
  top: 25px;
  left: 75px;
  width:200px;
  height:200px;
}

200px genişliği ve 200px yüksekliğinde bir kutu seçicisinin üstten 25px ve soldan 25 px ötelenmesiyle şu şekil bir görüntü oluşacaktır.

Absolute

Absolute özelliğini, genellikle kapsayıcısına relative özelliğini vererek kullanırız. Özellik kullanıldığında eleman akıştan çıkar ve diğer elemanlar onun yerini görmez. Genellikle kapsayıcısına relative özelliği verilir. Eğer yoksa da kendini body ye göre konumlandırır. Hemen örneklendirelim.

HTML kodları:

<div class="kapsayıcı>
   <div class="kutu"></div>
</div>

.kapsayıcı {
  position: relative;
  width: 400px;
  height: 200px;
}
.kutu {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: black;
}

Kodlarımız şu şekilde görünecektir:

Peki şimdi birden fazla kutumuz olduğunu varsayalım. Kodlarımız şu şekilde olsun:

<div class="kapsayıcı>
   <div class="kutu1"></div>
   <div class="kutu2"></div>
   <div class="kutu3"></div>
</div>

.kapsayıcı {
  position: relative;
  width: 760px;
  height: 480px;
}
.kutu1 {
  width: 100px;
  height: 100px;
  background: black;
}

.kutu2 {
  width: 100px;
  height: 100px;
  background: red;
}
.kutu3 {
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background: blue;
}

Kodlarımız böyle görünecektir. İkinci kutuya position:absolute; özelliğini verdiğimiz takdirde ise görüntümüz şuna dönüşecektir:

İkinci kutumuza position:absolute; verdik lakin üçüncü kutumuz olan mavi kutu ortadan kayboldu. Sebep?

Aslında mavi kutu ortadan kaybolmadı tam olarak kırmızı kutunun altına geçti. Kırmızı kutuya position:absolute; özelliğini verdiğimiz için akıştan çıktı ve mavi kutu kırmızı kutunun yerine geçmiş oldu sadece. Top, right, left, bottom özellikleri ile kırmızı kutuya konum ataması yaparsanız mavi kutunun ortaya çıktığını göreceksiniz. İsterseniz de z-index özelliği sayesinde katman öncelikleri vererek istediğiniz kutuyu gösterebilirsiniz. Deneyelim…

z-index özelliği

.kutu2 {
  width: 100px;
  height: 100px;
  background: red;
  position:absolute;
  z-index: -1
}

İkinci kutumuza z-index: -1 değeri vererek görüntümüz aşağıdaki halini alacaktır.

z-index: -1 vererek aslında kırmızı kutumuzu arkaplana yani mavi kutunun arkasına attık. Tam tersi olarak 1 vs. gibi daha büyük sayılar verilirse de katman önceliği verilmiş olur.

Fixed

Aslında bu özelliği hepiniz biliyorsunuz. Birçok sitede farketmişsinizdir. Herhangi bir websiteye girdiniz. Kaydırma çubuğunu aşağı doğru kaydırıyorsunuz ve üst menünün siz ne kadar kaydırırsanız kaydırın sabit durduğunu farkediyorsunuz. İşte bu position: fixed; özelliğiyle yapılmaktadır. Bu özellik sanırım en iyi böyle açıklanabilir. 🙂

Maddeler halinde şöyle diyebiliriz:

• Eleman belge akışından çıkar.
• Sayfa kaydırılsa bile ekranın (viewport) aynı köşesinde kalır.
• Menü, bildirim kutusu veya “yukarı çık” butonları için uygundur.

Sayfada sabitlemek istediğiniz her eleman için kullanabilirsiniz.

.ust-menu {
  position: fixed;
  top: 0;
}

Sticky

Hibrit bir davranış gösterir. Normalde relative gibi davranır. Belirlenen eşik değerine gelince fixed özelliği göstermektedir.

.kutu {
  position: sticky;
  top: 10px;
  background: white;
}

Ekranın görünür alanına 10px kala kaydırma çubuğunu ne kadar aşağı indirirsek indirelim sabitlenecektir. Mesafeyi hep 10px olarak koruyacaktır.

Absolute ve sticky arasındaki en büyük fark şudur: Absolute kapsayıcı elemanı baz alır, sticky ise tarayıcı penceresini baz almaktadır.

Bu yazımda da anlatacaklarım bu kadardı. Anlamadığınız veya insanlık hali yanlış belirttiğim herhangi bir yer görürseniz aşağıdaki yorum alanından yazabilirsiniz. Görüşmek üzere…