Merhaba,

Bu yazımızda CSS’de öğeleri nasıl konumlandıracağımızı göreceğiz.

HTML yaşayan bir dökümandır. CSS kullanılmasa dahi HTML’in kendi kuralları vardır.

akışkanlık: içeriğin tarayıcı boyutlarına uyum sağlaması

sıralama: hangi öğelerin öncelikli gösterileceği

istif: öğelerin üst üste nasıl görüneceği

Her bir kuralın döküman içerisinde doğal davranışları bulunur.

Akışkanlık

HTML’de de pazarlamada olduğu gibi ‘the Content is King’. Yani içerik kraldır!

Tümblockelementler akışkandır. Görünümlerini içerdikleri içeriğe göre sürekli olarak uyarlarlar.

width:100%: block öğeler bulunduğu alanda ilerleyebildiği kadar genişlikte ilerler.

word wrap: Eğer block öğenin içeriği tek bir satıra sığmazsa, ikinci bir satırı doldurmaya devam eder.

height:auto: block öğe içeriğinin yüksekliğine göre otomatik olarak şekil alır.

Burada en çok dikkat etmemiz gereken 2 konu, block öğenin varsayılan olarak tam genişlikte (full width) yer kapladığı ve yüksekliğinin de içeriğine göre şekillendiğidir.

Sıralama

HTML öğeleri, kodlarındaki yazım sırasına göre sıralanırlar. HTML kodunda ilk yazılan öğe, tarayıcıda ilk gösterilen öğe olur.

Her bir block öğesi HTML kodundaki yazıldığı sıraya göre yukarıdan aşağıya doğru dizilir.

Kodda Görünümü:

<p>Birinci</p>
<p>İkinci</p>
<p>Üçüncü</p>
<p>Dördüncü</p>
<p>Beşinci</p>

Tarayıcıda Görünümü:

İstif

HTML’de hayali katmanlar bulunur. Bu katmanların istif sırası, öğelerin iç içe nasıl yerleştirildiğine bağlıdır. Bir öğesinin içine yazılmış bir başka HTML öğesi (alt öğe / child element) ana öğenin üstünde görünür. İç içe yazılan öğelerde, en içe yazılmış olan en üstte görünecek şekilde sıralanır.

Örnek Kod:

<div>
  Bu ana div öğesi öğe arkada görünür.
  <p>
    Bu paragraf (p) öğesi kodda divin içerisine yazılmıştır ama divin üstünde görünür ve <strong>bu strong öğesi de paragrafın içerisindedir</strong> ama o da paragrafın üstünde görünür.
  </p>
</div>

Tarayıcıda Görünümü:

Öğeleri iç içe kullandık ve size gösterebilmek için hepsine arkaplan rengi eklediğimde önizlemesinde hayali katmanları üst üste görebiliyorsunuz.

Akışı Kırmak

Tarayıcının varsayılan davranışları etkili olsa da, tasarım ihtiyaçlarınız için yeterli olmayabilir.

Birkaç CSS özelliği kullanarak bu davranış akışını değiştirebilirsiniz:

  • height ve width özelliklerini kullanarak öğenin akışkanlığını değiştirebilir, hangi ölçülere olacağını netleştirebilirsiniz.
  • float özelliği kullanarak öğenin nerede duracağı gibi bir davranışına müdahale edebilirsiniz.
  • position özelliği absolute ve fixed değerleri ile kullanılarak öğe sayfa akışından çıkartılabilir.
  • z-index kullanarak, öğelerin istiflenme sırasını da değiştirebilirsiniz.