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.
Fixed özelliği öğeyi sayfa içerisindeki bir alana sabitlemek için kullanılır. Sayfa içerisinde scroll hareket etse bile öğe aynı yerinde sabit kalır.
Ö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>
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
}
#kutu1{
background-color: blue;
}
#kutu2{
left: 30px;
top: 30px;
position: fixed;
background-color: red;
}
#kutu3{
background-color: green;
}
yeni başlayanlar için güzel bilgiler. teşekkür ederim.
ReplyDeletecss eğitimini öğrenin