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.
