CSS position özellikliği ile sayfa içerisindeki öğelerimizi konumlandırabiliriz. Position özelliği üç değer alabilir. Bu değerler; relative, absolute ve fixed'tir. Bu örneğimde ben relative özelliği üzerine bir örnek yaptım.
Absolute özelliği öğeyi onu kapsayan ve position:relative özelliğini almış öğeye göre ayarlar. Aksi halde kök elemente (<body>) göre ayarlar.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css3.css" rel="stylesheet" />
</head>
<body>
<div id="kapsayici">
<div id="kutu1" class="ortak"></div>
<div id="kutu2" class="ortak"></div>
<div id="kutu3" class="ortak"></div>
</div>
</body>
</html>
CSS Dosyası
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
position: relative;
}
#kutu1{
background-color: blue;
}
#kutu2{
position: absolute;
left: 30px;
top: 20px;
background-color: red;
}
#kutu3{
background-color: green;
}
Ekran Görüntüsü
Not! Kapsayıcı öğenin position:relative özelliğini silerek kırmızı kutunun <body> elementine göre pozisyonunu ayarladığını görebilirsiniz.
No comments:
Post a Comment