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...

Devamı »