Position Özelliği
CSS Position özelliği sayesinde sayfadaki nesnelerin nasıl konumlanacakları ve sabit mi yoksa hareketli mi olacakları belirlenebilir. Bu özellik en çok kutular yani div elemanları için kullanılmakta ve kutuların yerleri belirlenebildiği gibi üst üste gelmeleri durumunda hangi kutunun en üstte görüneceği de ayarlanabilmektedir.
Konumlandırma yapılırken öncelikle position özelliği belirlenmelidir. Örneğin;
.sabitKutu {
position:fixed;
left:200px;
top:50px;
}
Yukarıdaki örnekte de olduğu gibi position özelliği en üste yazılmalıdır. Aksi halde çalışmayabilir.
Nesneler static, absolute, fixed ve relative olmak üzere 4 farklı şekilde konumlandırılabilirler.
Nesnenin nasıl konumlanacağı belirlendikten sonra sol, sağ, üst ve alttan (left, right, top, bottom) uzaklıkları belirtilerek tam konumları ayarlanır.
1. Statik Konumlandırma (Static)
Varsayılan konumlandırmadır. Yani bütün elemanlar normalde statik konumlandırılırlar ve sayfanın akışına göre yan yana ya da alt alta yerleşirler.
2. Sabit Konumlandırma (Fixed)
Sabit konumlandırma yapıldığında o nesne ekranda sabit kalacaktır ve kaydırma çubuğuyla sayfa kaydırılsa da nesne hareket etmeyecektir.
Bu yöntemde;
left: nesnenin pencerenin soluna uzaklığı
right: nesnenin pencerenin sağına uzaklığı
top: nesnenin pencerenin üst kenarına uzaklığı
bottom: nesnenin pencerenin alt kenarına uzaklığını belirler.
3. Göreceli Konumlandırma (Relative)
Nesnelerin normalde olması gereken yerden belli bir mesafede yerleşmeleri sağlanabilir. Örneğin;
#Kutu{border:1px solid black; margin:0 auto; width:100px;}
.goreceliResim{position:relative; left:-20px;}
goreceliResim stilinin uygulandığı bir resmi, Kutu isimli div elemanı içerisine yerleştirdiğimizde resim normalde olması gereken yerden 20px daha solda yerleşecektir.
4. Mutlak Konumlandırma (Absolute)
Sabit konumlandırmadan farkı nesnelerin pencere içerisinde değil de sayfa içinde sabit kalmasıdır. Yani left, right, top ve bottom özellikleri ile pencere içindeki yeri belirlenir fakat sayfa aşağı yukarı kaydırıldığında nesne de hareket eder.
css position özelliği nedir, absolute ile relative farkı, absolute ile fixed farkı, css ile nesneleri ekrana sabitleme yerleştirme, css position örnekleri
KONU İLE İLGİLİ ÖRNEKLER
Kendini dene butonuna tıklayarak kodlar üzerinde değişiklik yapabilir ve sonucu görebilirsin.
#kutu1{
background-color: #6C3;
height: 100px;
width: 100px;
position: absolute;
left: 50px;
top: 50px;
}
30091 kez okundu.