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.