CSS'de Position Kullanımı

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 position: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;
}