CSS Element Pozisyonlama Modelleri

CSS Element Pozisyonlama Modelleri

HTML5 etiketlerinin x ve y koordinatlarını belirleyebiliyoruz.Pozisyonlama için left,right,top,bottom özelliklerinden faydalanılır.

4 farklı pozisyonlama modeli vardır.Bunları örneklerle inceleyelim.

Static(Olduğu Gibi)

Bu modelde element için herhangi bir pozisyon değeri verilemez.Elemente herhangi bir değer verilmediğinde de varsayılan olarak bu pozisyon modeli uygulanır.Yine de kendiniz stil vermek isterseniz aşağıdaki gibi verebilirsiniz.

div {

position:static;

}

Fixed (Sabitlemek)

Ekran boyutu değişse bile ,kendisini olduğu yerde sabitler.Aynı monitörün üzerine bir etiket yapıştırmışsınız gibi davranır.Genelde ekranın sağında solunda sabit kalan reklam uygulamalarında kullanılır.Veya sabit kalan arkaplan resimlerinde de kullanılabilir.

Şimdi bunu bir uygulama üzerinde görelim.Uygulamamızda bir resim yükletip,bunu yukarıdan 10px,soldan da 100px ölçüsünde sabitleyelim.Sayfa yatay veya dikey kaydırılsa bile bu ölçüde kalacak.Kodlarımızın içine bir miktar <br> kodu ile satır atlama ekleyeceğiz.Maksat uzunca bir satır ile dikey kaydırma çubuğunu açtırmak olacak.Çubuk kaydıkça resim yine sabit kalacak.

HTML

                                                                                                                                                          

<p>Bir erkeğin savaştan kaçamayacağı anlar vardır.<br>

O anlar ise arkadaşlarının hayallerine gülündüğü anlardır.<br>

(Usopp)<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>SAYFA SONU…</p>

<img class=”sabitlenmis-resim” src=”http://icons.iconarchive.com/icons/crountch/onepiece-character/256/Usopp-icon.png”/>

 CSS

3

P{

font-size:20px;

}

.sabitlenmis-resim{

position:fixed;   

left:100px;

top:10px;

}

Relatİve(Göreceli)

Kendinden bir önceki elemente göre kendini yeniden konumlandırır.Relative olan bir element de otomatik olarak z-index ( CSS’te katman sistemidir) değeri otomatik olarak 1 değer artar.Yani üst katmana çekilir.

Yukarıdaki örneğin aynısını (<br> etiketlerinden çıkarılmış hali ile) relative olarak tekrar inceleyelim.

HTML

5

<p>Bir erkeğin savaştan kaçamayacağı anlar vardır.<br>

O anlar ise rkadaşlarının hayallerine güldüğü anlardır.<br>

(Usopp)</p>

<img class=”goreceli-resim” src=”http://……../Usopp-icon.png”/>

CSS

 3

 

P{

font-size:20px;

}

.goreceli-resim{

 position:relative;

left:100px;

top:10px;

}

Bu stile göre <p> elementinden sonra hizalama başlıyor.Yani yazı ile arasında 10px boşluk var ve resim sol taraftan 100px içeride.

Absolute ( Mutlak) 

Tarayıcının sol-üst köşesine göre hiza alır.Aynı örneği bu sefer absolute olarak inceleyelim…

HTML

5

<p>Bir erkeğin savaştan kaçamayacağı anlar vardır.<br>

O anlar ise rkadaşlarının hayallerine güldüğü anlardır.<br>

(Usopp)</p>

<img class=”mutlak-resim” src=”http://……../Usopp-icon.png”/>

 CSS

3

P{

font-size:20px;

}

.mutlak-resim{

position:absolute;

left:100px;

top:10px;

}

Örneği daha iyi anlayabilmek için sayfayı yatay olarak biraz daraltmak gerekecek.Sayfa ölçüsü değişse bile 10px,soldan da 100px ölçüsünde kalacaktır.

 

 

Share this post

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir