CSS KONUMLANDIRMA
Css’de taglerin sayfada veya bir üst ebeveyn etiketin içerisinde nerede yer alacağını belirleyebiliriz. 4 tip konumlandırma vardır. Bunlar
1. Durağan (static)
2. Göreceli (Relavtive)
3. Mutlak (absolute)
4. Sabit (fixed)
Position özelliği : Etiketin veya elementlerin belgenin sol üst köşesinden başlayarak belli bir hizaya göre yer almalarını sağlar. Sayfanın sol üst köşesi (x,y)=(0,0) kabul edilir.
1. STATIC KONUMLANDIRMA
Bir nesneye konum-pozisyon verilmeyeceğini tanımlar ve kitler. Eğer ki siz bir elemente hiç bir konum atamadıysanız bunun konumu static’tir.
<style>
.hepsi{
position : static;
witd : 100px;
height : 100px
border : 1 px solid black;
}
#kutu2 {
left: 70px;
top : 70px;
}
</style>
<div>
<div class="hepsi">kutu1</div>
<div id="kutu2" class="hepsi">kutu2</div>
<div class="hepsi">kutu3</div>
</div>
Kodu çalıştırdığınızda göreceksiniz ki kutuların konumlarında hiç bir değişiklik yok halbuki biz kutu ikiye left:70px diyerek soldan 70px , top: 70px diyerek yukarıdan 70px boşluk vermek istemiştik. Ancak olmadı sebebi static deger bir nesneye pozisyon verilemeyeceğini tanımlar.
2.RELATIVE KONUMLANDIRMA Elementleri bulundukları konuma göre konumlandırır. Element ilk olarak nerde bulunuyorsa (x,y)=(0,0) noktası o element için o an bulunduğu konumun sol üst köşesidir.
<style>
.hepsi{
position : relative;
witd : 100px;
height : 100px
border : 1 px solid black;
}
#kutu2 {
left: 70px;
top : 70px;
}
</style>
<div>
<div class="hepsi">kutu1</div>
<div id="kutu2" class="hepsi">kutu2</div>
<div class="hepsi">kutu3</div>
</div>
Gördüğünüz gibi kutu2 bulunduğu konuma göre 70px sola 70px de aşağı kaymış bulunmakta. Eğer – değerler verirsek sol tarafa bitişik olan element sayfa dışına çıkabilir.
NOT : Relative konumlandirmayla konumlandırılan element sayfa veya ekran boyutu değişse de sayfadaki tam boyuta göre ayarlanmış konumunu korur.
3. ABSOLUTE KONUMLANDIRMA
Absolute konumlandırma sayfanın (x,y) kordinatini en üst sol köşe olarak kabul ederek işlem yapar.
<style>
.hepsi{
position : absolute;
witd : 100px;
height : 100px
border : 1 px solid black;
}
#kutu2 {
left: 70px;
top : 70px;
}
</style>
<div>
<div class="hepsi">kutu1</div>
<div id="kutu2" class="hepsi">kutu2</div>
<div class="hepsi">kutu3</div>
</div>
Gördüğünüz gibi kutu2 sol üst köşeden aşağı 70 sola 70px kaymış vaziyette. Ve tüm kutular da default olarak sol üst köşede birleşmiş durumda.
NOT : Absolute konumlandırma verilerek atanan piksel boşlukları sayfa büyüse de küçülse de değişmez örneğin siz üstten 70px boşluk bıraktırsanız bu dev ekranda da 70px ufak ekranda da 70px dir. Bu da elementlerin birbirine girmesine sebep olabilir.
Absolute konumlandırma da kutular üst üste bindiğine göre yeni bir kavram ortaya çıkıyor. Z indexi yani derinlik. Z indexi hangi katmanın daha üstte duracağını belirler. Örnekte 3 adet kutumuz var ise z-index özelliği 1den 3 e kadar değer alır ve en yüksek değer en üstte durur.
#kutu1{z-index:3;}
#kutu2{z-index:2;}
#kutu3{z-index:1;}
en üstte kutu1 daha sonra kutu2 , kutu3 şeklinde gitmektedir.
4. FIXED KONUMLANDIRMA
Elementleri sayfada yüzer hale getirirler. Örneğin reklamlar, sayfa ne kadar aşağı inse reklam gözükmeye devam eder.