Wolder King

Css Eğitimi Ders 12-Pozisyon

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div>
Merhaba,<br />
Ş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.<br />
<div>
<br /></div>
<ul>
<li>static : Hiçbir özellik belirtilmediyse</li>
<li>fixed : Sabit, tarayıcıya göre hareket etmeyen element</li>
<li>relative : Normal olması gereken pozisyona göre konum belirlemek</li>
<li>absolute : Koordinat belirlemek</li>
</ul>
<h4>
Static</h4>
<div>
Herhangi bir position belirmemek durumunda oluşan html etiketlerinin  top (üst), bottom(alt), right(sağ) ve left(sol) özelliklerine sahip olmamasıdır.</div>
<h4>
Fixed</h4>
<div>
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:</div>
<div>
<br /></div>
<div>
p{</div>
<div>
position: fixed;</div>
<div>
<br /></div>
<div>
bottom: 50px;</div>
<div>
right: 25px;</div>
<div>
}</div>
<div>
<br /></div>
<div>
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.</div>
<h4>
Relative</h4>
<div>
Tag'a özel pozisyonundan farklı bir değer vermeyi sağlar. Sağ'a kaydırma, sola kaydırma gibi. Örneğin:</div>
<div>
<br /></div>
<div>
h4 {</div>
<div>
position: relative;</div>
<div>
<br /></div>
<div>
left: -15px;</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu kodu çalıştırdığımızda h4 etiketinin kullanıldığı kısımda 15px sola kayacaktır.</div>
<h4>
Absolute</h4>
<div>
Tag için herhangi bir konum belirlemeyi sağlar. Konumu her yer olabilir.</div>
<div>
<br /></div>
<div>
h1 {</div>
<div>
position: absolute;</div>
<div>
left: 50px;</div>
<div>
top: 100px;</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu şekilde h1 başlığının 50px solda 100px üstte olmasını sağladık. </div>
<h4>
z-index</h4>
<div>
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:</div>
<div>
<br /></div>
<div>
img.duyuru {</div>
<div>
position: fixed;</div>
<div>
<br /></div>
<div>
left: 0px;</div>
<div>
top: 0px;</div>
<div>
<br /></div>
<div>
z-index: 1</div>
<div>
}</div>
<div>
<br /></div>
<div>
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.</div>

Css Eğitimi Ders 12-Pozisyon

Merhaba, Şimdi önemli bir konu olan bazı elementlerin pozisyonlarını belirtmeyi göreceğiz. Bildiğimiz üzere tüm elementler top (üst), bot...