CSS Dersleri 21 - Position Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Position Özelliği konusunu öğreneceğiz.

CSS'de "position" özelliği, bir etiket için kullanılan konumlandırma yönteminin türünü belirtir.

Beş farklı position değeri vardır:

  • absolute
  • fixed
  • static
  • relative
  • sticky

Bu pozisyonlar kullandıktan sonra, etiketler  top, bottom, left ve right özellikleri kullanılarak konumlandırılır. Ancak, önce position özelliği ayarlanmadıkça bu özellikler çalışmayacaktır. Ayrıca position değerine bağlı olarak farklı şekilde çalışırlar.

position : static kullanımı

HTML öğeleri varsayılan olarak statik konumlandırılmıştır.Statik konumlandırılmış etiketler, top, bottom, left ve right özelliklerden etkilenmez.Statik etiketler herhangi bir özel şekilde konumlandırılmamıştır ve her zaman sayfanın normal akışına göre konumlandırılırlar.

div.static {
  position: static;
  border: 3px solid #73AD21;
}

position : relative kullanımı

CSS'de "position:relative" özelliği, normal konumuna göre konumlandırılmıştır.Relative olarak konumlandırılmış bir etiketin top, bottom, left ve right özelliklerinin ayarlanması, normal konumundan uzağa ayarlanmasına neden olacaktır. Diğer blok etiketleri, etiketin bıraktığı herhangi bir boşluğa sığacak şekilde ayarlanmayacaktır.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position : fixed kullanımı

CSS'de "position:fixed" özelliğine sahip etiket, görüntü alanına göre konumlandırılmıştır, yani sayfa kaydırılmış olsa bile her zaman aynı yerde kalır. top, bottom, left ve right gibi özellikler, öğeyi konumlandırmak için kullanılır.

Sabit (Fixed) bir etiket, sayfada normalde bulunduğu yerde boşluk bırakmaz.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

position : absolute kullanımı

CSS'de "position:absolute" özelliğine sahip bir etiket, en yakın konumlandırılmış ata etikete göre konumlandırılır (fixed gibi, görüntü alanına göre konumlandırılmaz).

Ancak; absolute konumlandırılmış bir öğenin konumlandırılmış üst etiketi yoksa, body etiketine göre kullanılır ve sayfa kaydırmayla birlikte hareket eder.

Not: "Konumlandırılmış" bir etiket, konumu statik dışında herhangi bir şey olan bir öğedir.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

position : sticky kullanımı

CSS'de "positiion:sticky" özelliğine sahip bir etiket: kullanıcının kaydırma çubuğu konumuna göre konumlandırılır. Sticky bir etiket, kaydırma konumuna bağlı olarak relative ve fixed arasında geçiş yapar. Görüntü alanında belirli bir ofset konumu karşılanıncaya kadar "relative"  olarak konumlandırılır - daha sonra yerine "fixed" olarak devam eder.

div.sticky {
  position: -webkit-sticky; /* Safari İçin */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Çakışan (Overlapping) Etiketler

Öğeler konumlandırıldığında, diğer öğelerle çakışabilirler. CSS'te "z-index" özelliği, bir öğenin gözükme sırasını belirtir (hangi öğenin diğerlerinin önüne veya arkasına yerleştirilmesi gerekir).

Bir öğe, pozitif veya negatif bir indis sırasına sahip olabilir:

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Daha büyük indis sırasına sahip bir öğe, her zaman daha düşük indis sırasına sahip bir öğenin önündedir. Konumlandırılmış iki öğe bir z-index belirtilmeden çakışırsa, HTML kodunda en son konumlandırılan etiket en üstte gösterilir.

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla