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), bottom(alt), right(sağ) ve left(sol) özelliklerine sahiptir. Anacak bu özellikler "position" özelliği kullanılmadıysa yarayacaktır. static : Hiçbir özellik belirtilm…

Devamı »