CSS’de “Position” Özelliği ile Konumlandırma Yapma

Bu derste, CSS’in temel yapı taşlarından biri olan “position” özelliğini inceleyeceğiz. Web tasarımında elemanların sayfa üzerindeki konumlarını kontrol etmemizi sağlayan bu özellik, etkileyici ve işlevsel düzenler oluşturmanın vazgeçilmez bir parçasıdır.

CSS’de “Position” Özelliği

“Position” kelimesi İngilizcede “konum” veya “pozisyon” anlamına gelir. CSS’teki işlevi de kelimenin anlamını tam olarak yansıtır: Bir elemanın sayfa üzerindeki yerini belirlemek ve kontrol etmek için kullanılır. Bu özellik sayesinde, bir elemanın sayfada tam olarak nerede duracağını ve diğer elemanlarla olan ilişkisini tanımlayabiliriz.

CSS’in position özelliği, bir elemanın yerleşimini belirlemek için kullanılan güçlü bir araçtır. Bu özellik, bir elemanın başlangıç konumunu ve hareketini tanımlamak için kullanılır. Elemanın yerleştirileceği referans noktası, seçilen position değeri ile değişir.

CSS position özelliği, bir elemanı konumlandırmak için aşağıdaki 5 temel değeri destekler:

  1. position: static;
    • Varsayılan değerdir. Element, sayfanın doğal akışına göre yerleştirilir. top, left, right, bottom gibi özellikler bu durumda etkili olmaz.
  2. position: relative;
    • Element, doğal yerinden başlar ancak top, left, right, ve bottom değerleri ile kendi konumuna göre hareket ettirilebilir.
  3. position: absolute;
    • Element, en yakın relative konumlanmış üst elemanına göre yerleştirilir. Eğer böyle bir üst eleman yoksa, sayfa köşelerine göre konumlandırılır.
  4. position: fixed;
    • Element, tarayıcı penceresine sabitlenir. Sayfa kaydırıldığında bile konumu değişmez. Genelde sabit menüler veya butonlar için kullanılır.
  5. position: sticky;
    • Element, hem relative hem de fixed özelliklerini birleştirir. Belirtilen bir mesafeye ulaştığında tarayıcıya yapışır ve orada kalır.

❗position: static; dışında tanımlanan diğer position değerlerine sahip bir element, top, bottom, left, ve right özellikleri kullanılarak sayfa içinde konumlandırılabilir.

Sırasıyla bu değerleri inceleyelim:

position: static; Kullanımı

HTML elementleri varsayılan olarak position: static; değeri ile konumlandırılır. Bu ise elementlerin sayfa üzerindeki doğal akışa uygun şekilde yerleştirildiği anlamına gelir. Statik konumlandırma, herhangi bir özel konumlandırma yapılmadığında kullanılan varsayılan ayardır ve bu durumda top, bottom, left, ve right gibi özellikler elementin yerleşimini etkilemez.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Örneği</title>
  <style>
    .container {
      height: 500px;
      background-color: lightgreen;
    }

    .div-1, .div-2, .div-3, .div-4 {
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 5px;
      display: inline-block;
    }

    .div-1 {
      background-color: yellow;
      color: black;
    }

    .div-2 {
      background-color: blueviolet;
    }

    .div-3 {
      background-color: blue;
    }

    .div-4 {
      background-color: pink;
      color: black;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-1">div-1</div>
    <div class="div-2">div-2</div>
    <div class="div-3">div-3</div>
    <div class="div-4">div-4</div>
  </div>
</body>
</html>
Dene

position: relative; Kullanımı

HTML elementleri position: relative; ile konumlandırıldığında, element doğal yerleşim konumunu referans alarak belirtilen bir mesafeye kaydırılabilir. Bu işlem, top, bottom, left, ve right özellikleri kullanılarak gerçekleştirilir. Örneğin, bir elemente position: relative; verilmiş ve top: 10px; yazılmışsa element doğal konumundan 10 piksel aşağıya hareket eder.

❗ Ancak, önemli bir nokta şudur: Elementin doğal akıştaki yeri korunur ve bu boş alan doldurulmaz. Yani, diğer elementler kaydırılan elementin bıraktığı boşluğu kapatmaz. Bu nedenle, position: relative; ile kaydırılmış bir element, görünümde farklı bir yerde olsa bile, sayfa akışındaki orijinal yeri hala ona ait olur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Relative Örneği</title>
  <style>
    .container {
      height: 500px;
      background-color: lightgreen;
    }

    .div-1, .div-2, .div-3, .div-4 {
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 5px;
      display: inline-block;
    }

    .div-1 {
      background-color: yellow;
      color: black;
    }

    .div-2 {
      background-color: blueviolet;
      position: relative;
      left: 75px;
      top: 75px;
    }

    .div-3 {
      background-color: blue;
    }

    .div-4 {
      background-color: pink;
      color: black;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-1">div-1</div>
    <div class="div-2">div-2</div>
    <div class="div-3">div-3</div>
    <div class="div-4">div-4</div>
  </div>
</body>
</html>
Dene

Yukarıdaki örneğimizde de bu durum net bir şekilde gözlemlenmiştir. Zira div-2 elementine position: relative; yazılmış ve top ve left özellikleri kullanılarak yeni bir konuma atanmıştır. Ancak normal akış devam etseydi bulunacağı konum başka elementlerce doldurulmamış ve boş kalmıştır.

Özetle, position: relative; uygulanmış element normal akış devam etseydi bulunacağı konuma göre yeniden konumlandırılmasıdır. Yani top, bottom, left ve right özellikleri o elementi kendisine göre konumlandırır. Normal akıştaki konumu ise kendisinde kalmaya devam eder.

position: absolute; Kullanımı

HTML elementleri position: absolute; olarak ayarlandığında, ilgili element normal akıştaki konumuna göre değil, position: static; harici bir özellik atanmış en yakın ata elementine göre konumlandırılır.

Eğer absolute olarak konumlandırılmış bir elementin böyle bir atası yoksa, belge gövdesine (body) göre konumlandırılır. Aşağıdaki örneği inceleyiniz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Positioning</title>
  <style>
    .container {
      height: 500px;
      background-color: lightgreen;
      margin: 50px;
      position: relative; /* Absolute positioning için referans noktası */
    }

    .div-1, .div-2, .div-3, .div-4 {
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 5px;
    }

    .div-1 {
      background-color: yellow;
      color: black;
    }

    .div-2 {
      background-color: blueviolet;
      position: relative;
      left: 75px;
      top: 75px;
    }

    .div-3 {
      background-color: blue;
      position: absolute;
      left: 15px;
      top: 75px;
    }

    .div-4 {
      background-color: pink;
      color: black;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-1">div-1</div>
    <div class="div-2">div-2</div>
    <div class="div-3">div-3</div>
    <div class="div-4">div-4</div>
  </div>
</body>
</html>
Dene

Yukarıdaki örneğimizde position: absolute; uygulanmış div-3 elementimiz, left ve top özellikleri girilerek normal akış devam etseydi bulunacağı bölgeye göre değil ilk atası olan container elementine bakmıştır. Ancak ilk ata elementi de position: static; olarak konumlandığı için onu es geçip bir üst ata elementine, yani body elementine göre konumlandırılmıştır.

Eğer ilk ata elementi position: static; harici bir konumlandırma ile yapılsaydı konumlandırma ona göre olacaktı. Bakınız:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Positioning Example</title>
  <style>
    .container {
      height: 500px;
      background-color: lightgreen;
      margin: 50px;
      position: relative; /* Absolute elemanlar için referans noktası */
    }

    .div-1, .div-2, .div-3, .div-4 {
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 5px;
    }

    .div-1 {
      background-color: yellow;
      color: black; /* Sarı kutudaki yazının daha iyi görünmesi için */
    }

    .div-2 {
      background-color: blueviolet;
      position: relative; /* Kendi konumuna göre hareket eder */
      left: 75px;
      top: 75px;
    }

    .div-3 {
      background-color: blue;
      position: absolute; /* Container'a göre konumlanır */
      left: 15px;
      top: 75px;
    }

    .div-4 {
      background-color: pink;
      color: black; /* Pembe kutudaki yazının daha iyi görünmesi için */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-1">div-1</div>
    <div class="div-2">div-2</div>
    <div class="div-3">div-3</div>
    <div class="div-4">div-4</div>
  </div>
</body>
</html>
Dene

Ancak normal akış devam etseydi bulunacağı konum ise ardından gelen element tarafından doldurulmuştur. Özetle

  • position: absolute; uygulanmış bir element kendisini, konumlandırılmış olan ilk position: static; harici ata elementine göre konumlandırır. Eğer hiçbir ata buna uymazsa elementimiz body elementine göre konumlandırılır.
  • Elementimizin normal akış olsaydı yerleşeceği konumu ise artık kendisine ait olmaktan çıkar ve bir başka elemente tahsis edilir.

position: fixed; Kullanımı

HTML elementleri position: fixed; olarak ayarlandığında, element görüntü alanına (tarayıcı penceresine), yani body elementine göre top, bottom, left, ve right gibi özelliklerle konumlandırılır. Bu ise ilgili elementin sayfa kaydırılsa bile her zaman aynı yerde kalacağı anlamına gelir ve bu sayede de ekran üzerinde sürekli görünür durumda olacaktır.

Bu konumlandırma türü kullanıldığında, element doğal akıştan çıkar ve sayfa içindeki diğer elementlerle olan düzenini kaybeder. Ayrıca, kaydırma çubuğu (scroll-bar) hareket ettirilse dahi element belirtilen konumunu korur. Bakınız:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Positioning Example</title>
  <style>
    .container {
      height: 1000px;
      background-color: lightgreen;
      margin: 50px;
      position: relative; /* Absolute ve fixed için referans noktası */
    }

    .div-1, .div-2, .div-3, .div-4 {
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 5px;
    }

    .div-1 {
      background-color: yellow;
      color: black; /* Yazının okunabilirliği için */
    }

    .div-2 {
      background-color: blueviolet;
      position: relative; /* Kendi konumuna göre hareket eder */
      left: 75px;
      top: 75px;
    }

    .div-3 {
      background-color: blue;
      position: fixed; /* Tarayıcı penceresine sabitlenir */
      left: 15px;
      top: 75px;
    }

    .div-4 {
      background-color: pink;
      color: black; /* Yazının okunabilirliği için */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-1">div-1</div>
    <div class="div-2">div-2</div>
    <div class="div-3">div-3</div>
    <div class="div-4">div-4</div>
  </div>
</body>
</html>
Dene

position: sticky; Kullanımı

HTML elementleri position: sticky; özelliğiyle konumlandırıldığında, eleman hem sayfanın doğal akışı içinde hareket eder hem de belirli bir noktaya ulaştığında sabitlenir.

“Sticky” kelimesi İngilizcede “yapışkan” anlamına gelir ve bu özellik, adını tam anlamıyla yansıtır. Bir element position: sticky; ile ayarlandığında, önce normal akışta yer alır. Ancak kaydırma sırasında belirtilen bir konuma ulaştığında sabitlenir ve ekranın o kısmında yapışkan bir şekilde kalır.

Bu özellik, özellikle başlıklar veya menülerin sayfa kaydırıldığında belirli bir konumda sabitlenmesi gerektiğinde oldukça kullanışlıdır. Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Sticky Position Example</title>
  <style>
    .container {
      height: 1500px;
      background-color: lightgreen;
      margin: 25px;
    }

    .div-1, .div-2, .div-3, .div-4 {
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 5px;
    }

    .div-1 {
      background-color: yellow;
      color: black; /* Yazının okunabilirliği için */
    }

    .div-2 {
      background-color: blueviolet;
    }

    .div-3 {
      background-color: blue;
      position: sticky; /* Sayfa kaydırıldığında yapışkan hale gelir */
      top: 0px; /* Container'in üst kısmında yapışacağı mesafe */
    }

    .div-4 {
      background-color: pink;
      color: black; /* Yazının okunabilirliği için */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-1">div-1</div>
    <div class="div-2">div-2</div>
    <div class="div-3">div-3</div>
    <div class="div-4">div-4</div>
  </div>
</body>
</html>
Dene

CSS’de position: sticky; konumlandırma, bir elementin sayfa kaydırıldığında hem doğal akışta hareket etmesini hem de belirli bir kaydırma noktasına ulaştığında sabitlenmesini sağlar. Bu özellik, kullanıcılara dinamik ve akıcı bir deneyim sunarak tasarımları daha işlevsel hale getirir.

Ancak, position: sticky; tüm tarayıcılar tarafından tam olarak desteklenmeyebilir. Bu nedenle, projelerde bu özelliği kullanmadan önce tarayıcı uyumluluğunu kontrol etmek önemlidir. Tarayıcı uyumluluğunu kontrol etmek için MDN Web Docs gibi güvenilir kaynakları kullanabilirsiniz.

İlgili Makaleler

CSS’te “Width” ve “Height” Özellikleri Kullanımı

1 Eylül 2022

CSS ile “liste” Stilleme

10 Eylül 2022

Web Sayfalarına İkon Nasıl Eklenir?

3 Eylül 2022

CSS “Display” Özelliği

11 Eylül 2022

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu