CSS’de Position kavramını anlamak

Yeniden ve en baştan başladığım blog yazılarıma CSS de position olayını anlamak ile başlamak istedim. Bloglarımda mümkün mertebe kısa ve yalın bir dil kullanmaya özen göstereceğim. Gereksiz tekrarlardan kaçınmaya çalışacağım. Bilmenizde yarar var o da aşağıdaki bilgiler sıfırdan başlayanlar için değil tecrübesi olanlar içindir.

CSS de top, left, right ve left gibi bir elementin yerini gözükeceği yeri tayin etmenizi sağlayan attributelar bulunmaktadır.  Örnek olarak:

Ama bunları kullanabilmek için position isimli değeri fixed, absolute yada relative değerlerinden birisini atamış olmanız gerekmektedir. Normalde hiç bir şey atanmadığında bu değer static idir ama  o zaman top bottom left right gibi bilgiler işe yaramamaktadır.

Absolute

Belkide en basitlerinden bir tanesi bu olduğundan dolayı bundan başlamak istedim. Normalde HTML kısmına eklediğiniz elementlerin sayfada eklenme sıralarına göre bir yerleri vardır ama siz position:absolute diyerek ve top left gibi attributeları set ederek elementinizi sayfanın istediğiniz her hangi bir yerinde gösterebilirsiniz. Ama burada dikkat edilmesi gereken bazı husurlar mevcud:

  1. absolute olarak set edilen bir element kendisini parent yani atalarında position özelliği relative yada fixed olarak atanmış ilk atasına göre belirler. Eğer hiç bir atası fixed yada relative positiona sahip değilse bu html tagına göre belirlenmiş olur. Eğer atalarında fixed yada absolute varsa o zaman top ve left gibi değerler sayfa üzerinde kullanılırken tarayıcı penceresinden değilde ata element üzerinden başlanarak eklenir.
  2. Genelde relative elementler absolute olanların içermek ve yerlerini belirlemek için kullanılır.
  3. absolute olan elementler sayfanın original akışı üzerine bir etkileri olmaz. Onlar sayfada elementlerin yerleri hesaplanırken hesaba katılmazlar.

Absolute olan elementler birbirlerini kaplayabilirler.

Fixed

Bu da siz sayfanın neresinde olursanız olun sayfanın aynı yerinde her zaman gözükecek şekilde HTML elementinizi göstermenizi sağlar.

Relative

Eğer position:relative olarak kullandığınızda top ve bottom gibi bilgiler kullanılırken başlangıç noktası elementinizin sayfada ki normal akışısı sırasında ilk yeri olarak alınır. Mesela siz relative demediğinizde eğer elementiniz doğal halinde sayfanın sağ üst köşesinde yer alıyorsa orası hesaba katılarak ve başlangıç olarak görülerek top bottom left right bilgileri kullanılır. Relative elementler birbirleri üzerinde birbirlerini kaplayabilirler.

Static

Bu ise önceden de bahsettiğimiz gibi default yani hiç bir şey yapılmadığında geçerli olan ilk değerdir.

Eğer elementleriniz birbirleri üzerine overlap yani birbirlerini kaplarlarsa hangisinin daha yukarıda belirlemesini sağlamak için z-index isimli CSS kuralını kullanabilirsiniz.

Notes of My Life