CSS Konumlandırma (Position)
CSS Konum Nasıl Ayarlanır? CSS Konum Belirleme, CSS Konumlandırma ve konumlandırma ile ilgili birçok bilgiyi bu makalemizde bulabilirsiniz.
CSS Konumlandırma (Position)
Konum özelliği, bir öğe için kullanılan konumlandırma yönteminin türünü belirtir.
Beş farklı konum türü vardır:
- static
- relative
- fixed
- absolute
- sticky
Elemanlar daha sonra üst, alt, sol ve sağ özellikler kullanılarak konumlandırılır. Ancak, ilk olarak position özelliği ayarlanmadıkça bu özellikler çalışmayacaktır. Ayrıca konum değerine bağlı olarak farklı çalışırlar.
position: static;
HTML öğeleri varsayılan olarak statik olarak konumlandırılır.
Statik konumlu elemanlar üst, alt, sol ve sağ özelliklerden etkilenmez.
position: static; özel bir şekilde konumlandırılmamıştır; her zaman sayfanın normal akışına göre konumlandırılır.
Örnek:
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; öğeyi normal konumuna göre konumlandırır.
Nispeten konumlandırılmış bir elemanın üst, sağ, alt ve sol özelliklerinin ayarlanması, normal konumundan uzağa ayarlanmasına neden olur. Yani diğer içerik, öğenin bıraktığı boşluğa sığacak şekilde ayarlanmayacaktır.
Örnek:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
position: fixed; görünüm alanına göre konumlandırır, yani sayfa kaydırılsa bile her zaman aynı yerde kalır. Öğeyi konumlandırmak için üst, sağ, alt ve sol özellikler kullanılır.
Sabit bir öğe, normalde bulunduğu yerde sayfada bir boşluk bırakmaz.
Sayfanın sol altına dikkat edin!
Örnek:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position:absolute en yakın konumlanmış elemana göre konumlanır.
Ancak; mutlak konumlandırılmış bir öğenin konumlandırılmış elemanı yoksa, belge gövdesini (body) kullanır ve sayfa kaydırma çubuğu (scroll) ile birlikte hareket eder.
Not: Mutlak konumlanmış öğeler normal akıştan çıkarılır ve öğelerle örtüşebilir.
Örnek:
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;
position: sticky; öğeyi kullanıcının kaydırma konumuna göre konumlandırır.
Bir öğe, kaydırma konumuna bağlı olarak "relative" ve "fixed" arasında geçiş yapar. Görünüm alanında belirli bir ofset konumu oluşana kadar relative olarak konumlandırılır. Ardından sabit konuma geçer.
Not: Internet Explorer, sabit konumlandırmayı desteklemez.
Bu örnekte, kaydırma konumuna ulaştığınızda sabit öğe sayfanın en üstüne yapışır.
Örnek:
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}Bir Resimde Metni Konumlandırma
Bir resmin üzerine metin nasıl yerleştirilir?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Üst Sol</div>
</div>
</body>
</html>
Tepkiniz Nedir?
