Css Konumlandırma (Position)

Css Konumlandırma (Position)

Arkadaşlar bu yazımda sizlere css de position yani konumlandırma özelliğinden bahsedicem.Css de position adındanda anlaşıldığı üzere bir elementin konumunu belirlememizde kullandığımız css özelliğidir.Dört farklı şekilde uygulanır yani 4 çeşit konumlandırma vardır.

Bunlar static,relative,absolute ve fixed olmak üzere 4 çeşittir.Bunların tek tek anlamlarını nasıl yapıldığını yazımın devamında açıklıycam.Position özelliğiyle cssde bolca karşılaşabilirsiniz.Biraz zordur aslında ama olayı kavradığınızda eğlenceli de bir hal alır diyemiycem 2 satırlık kodun neyi eğlenceli olsun.

Konumuza dönelim ve şimdi position özelliğini çeşitlerini nerelerde kullanıldığını tanımları ve örnekleriyle görelim.İlk olarak özellikleri tanıyalım.

Position Çeşitleri

1 : Static

Static özelliği birbiriyle ilişkili elementleri hiçbir özellik kullanmadan ham haliyle kullanan bir özellik.Yani oluşturduğumuz divlerin standart olarak geldiği position özelliği statictir.

2 : Relative

Relative özelliği ise mantık olarak static gibi çalışır nerede olduğunu bilir ve kendini konumlandırır farkları ise konumlandırma seçeneklerinin relative de çalışıyor olmasıdır.

3 : Absolute

Absolute özelliği birazcık başına buyruk diyebileceğimiz bir özellik sanki tek başınaymış gibi davranır hiçbir divi takmaz.Relative ile aralarındaki fark relative diğer elementlere göre absolute tarayıcıya göre kendini konumlandırır.

4 : Fixed

Fixed özelliği ise sabit bir div oluşturmak istiyorsak kullanacağımız seçenek kesinlikle fixed özelliğidir.Konumlandırdığımız yerden asla oyanamaz tembel bir arkadaşımızdır.

Şimdi Birde canlı örneklerimizle görelim ;

Html Kodları :

<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>

Css Kodları :

body {
background-color:#325780;
}
div {
 background-color:#FFFFFF;
 width:200px;
 border:1px dotted black;
 font:bold 22px/100px Tahoma;
 text-align:center; 
}
.static {
 position:static;
}
.relative {
 position:relative;
 top:50px;
 left:50px;
}
.absolute {
 position:absolute;
 top:50px;
 left:110px;
}
.fixed {
 position:fixed;
 bottom:50px;
 right:30px;
}

Uygulamalı Örnek : 

Kolay gelsin.