Bu dersimizde css positionları anlatacam.Tüm siteyi positionlarla kurmayın diyerek bir uyarıyla başlayayım :).Şimdi positionun 3 parametresi vardır onlardan başlayalım.
1-relative
2-absolute
3-fixed
Positionun genel işleyiş mantığını anlatayım. Burası önemlidir.Positionla bir objeyi pozisyonlandırırken bu sitenin sol üst köşesini referans alır.Bu standarttır.Bir html nesnesine relative değerini verirsek onun altındaki objelerde pozisyon verirken relative verdiğimiz objenin sol üstünü referans alır.
Şimdi kodlarımıza başlayalım.
1-Relative
Bir objeye bunu verdiğimiz zaman bu obje altındakilere pozisyon başlangıcının bu objenin sol üstü olduğunu belirtiyoruz.
position:relative;
2-Absolute
Bir objeyi Pozisyon vereceksek bunu yazmamız gerek.Aksi taktirde kodlarımız çalışmaz.Absolute sayesinde istediğimiz yere koyabiliriz.Position absolute verdiğimizde altında yine position absolute kullanırsak başlangıcını burdan alır.Bir nevi position:relative işlevide görür.
position:absolute;
3-Fixed
Bir objeyi bir yere sabitlemek için kullanırız.Yani fixed değerini verip pozisyonlandırırsak.O objeyi oraya çakmış oluruz.Yani scroll inse bile bu orda kalır.
position:fixed;
NOT:Positionla yerleştirdiğimiz objeler sayfada bir ağırlıkları yoktur.Yani positionla yerleştirdiğimiz objenin ardındaki bir objeyi ittirmez üst üste gelebilir.
Yerleştirme
Position verdikten sonra objenin pozisyonunu vermek için kodlarımız şunlar:
left = sol
right = sağ
top = üst
bottom = alt
left:50px;
right:-50px;
top:100px;
bottom:75px;
Genel Örnek:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.ana{width:500px;height:300px;background:red;margin:auto;position:relative;margin-top:100px;}
.pos{width:100px;height:30px;position:absolute;left:100px;top:-50px;background:blue;}
.serpos{width:100px;height:50px;background:yellow;position:fixed;top:50px;left:50px;}
</style>
</head>
<body>
<div class="serpos"></div>
<div class="ana">
<div class="pos"></div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
UstaDerslik
