CSS POSITIONING

Positioning özelliği, elementlerin belirli bir konumda görüntülenebilmesini sağlar. Bu özellik sayesinde elementler dört farklı pozisyonda tutulabilir: static, relative, absolute ve fixed.

Static position (statik konum), elementin varsayılan pozisyonudur ve elementler sayfanın normal akışında görüntülenir. Relative position (relatif konum), elemanın orijinal pozisyonuna göre konumunu ayarlar. Absolute position (mutlak konum), elemanın belirli bir konuma sabitlenmesini sağlar ve bu konum belirli bir üst veya sol paydan ölçülebilir. Fixed position (sabit konum), elemanın ekranın herhangi bir yerinde sabit kalmasını sağlar.

Aşağıdaki kod blokları, Positioning özelliği için bazı örnekler içermektedir:

<div class="static-example">
  <h1>Bu bir statik konumdaki div etiketidir</h1>
  <p>Bu element, varsayılan pozisyonunda görüntülenir.</p>
</div>

<div class="relative-example">
  <h1>Bu bir relatif konumdaki div etiketidir</h1>
  <p>Bu element, orijinal pozisyonuna göre konumunu ayarlar.</p>
  <div class="relative-child">
    <p>Bu bir relatif konumdaki iç div etiketidir</p>
  </div>
</div>

<div class="absolute-example">
  <h1>Bu bir mutlak konumdaki div etiketidir</h1>
  <p>Bu element, belirli bir konuma sabitlenir.</p>
  <div class="absolute-child">
    <p>Bu bir mutlak konumdaki iç div etiketidir.</p>
  </div>
</div>

<div class="fixed-example">
  <h1>Bu bir sabit konumdaki div etiketidir</h1>
  <p>Bu element, ekranın herhangi bir yerinde sabit kalır.</p>
</div>

.static-example {
  position: static;
  background-color: lightblue;
  color: white;
  padding: 10px;
}

.relative-example {
  position: relative;
  background-color: lightgreen;
  color: black;
  padding: 10px;
}

.relative-child {
  position: relative;
  background-color: yellow;
  color: black;
  padding: 10px;
}

.absolute-example {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: orange;
  color: white;
  padding: 10px;
}

.absolute-child {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: red;
  color: white;
  padding: 10px;
}

.fixed-example {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: purple;
  color: white;
  padding: 10px;
}

Yukarıdaki kod bloklarında, her bir pozisyonda farklı bir CSS stil tanımlaması yapılmıştır. Statik konum (static-example) varsayılan pozisyonda görüntülenirken, relatif konum (relative-example) orijinal pozisyonuna göre konumlandırılır ve içindeki diğer elementleri de etkiler. Mutlak konum (absolute-example), belirli bir konuma sabitlenir ve sabitlenen konumun sol ve üst paylarından ölçülür. Sabit konum (fixed-example), ekranın herhangi bir yerinde sabit kalır ve sayfa kaydırıldığında bile aynı yerinde durur.