Şimdi önemli bir konu olan bazı elementlerin pozisyonlarını belirtmeyi göreceğiz. Bildiğimiz üzere tüm elementler top (üst), bottom(alt), right(sağ) ve left(sol) özelliklerine sahiptir. Anacak bu özellikler "position" özelliği kullanılmadıysa yarayacaktır.
- static : Hiçbir özellik belirtilmediyse
- fixed : Sabit, tarayıcıya göre hareket etmeyen element
- relative : Normal olması gereken pozisyona göre konum belirlemek
- absolute : Koordinat belirlemek
Static
Herhangi bir position belirmemek durumunda oluşan html etiketlerinin top (üst), bottom(alt), right(sağ) ve left(sol) özelliklerine sahip olmamasıdır.
Fixed
Bu seçenek ile tarayıcı scroll (Kaydırma Çubuğu) oynatıldığında bile hareket etmeyen html tagları oluşturmaya yarar. Bunu yazı, resim gibi etiketlerde kullanabilirsiniz. Örneğin:
p{
position: fixed;
bottom: 50px;
right: 25px;
}
Bu kodu çalıştırınca p tagının sabit bir şekilde altta 50px ve sağdan 25px olarak durduğunu göreceksiniz. Bu fixed özelliği diğer tagların önüne geçer.
Relative
Tag'a özel pozisyonundan farklı bir değer vermeyi sağlar. Sağ'a kaydırma, sola kaydırma gibi. Örneğin:
h4 {
position: relative;
left: -15px;
}
Bu kodu çalıştırdığımızda h4 etiketinin kullanıldığı kısımda 15px sola kayacaktır.
Absolute
Tag için herhangi bir konum belirlemeyi sağlar. Konumu her yer olabilir.
h1 {
position: absolute;
left: 50px;
top: 100px;
}
Bu şekilde h1 başlığının 50px solda 100px üstte olmasını sağladık.
z-index
Belirlenen etiketin katmanını belirler. Yani birden fazla belirtmiş isek hangisi önde hangisi arkada diye belirtmemiz de gerekir. Bunun için z-index kullanılır. Örneğin:
img.duyuru {
position: fixed;
left: 0px;
top: 0px;
z-index: 1
}
Bu durumda img'ye özel "duyuru" adlı bir class içine fixed özelliği ile bir resim atadığımızı düşünelim. z-index belirtilmeyen taglar 0 olacağına göre resim öne geçecektir. Negatif sayılar ise arkasına geçmesine neden olur.
0 Yorum:
Yorum Gönder
Yorumunuz Başarıyla İletilmiştir. Kinger veya Takipçisi iseniz Puanınız Eklenecektir. Teşekkürler.