Showing posts with label css position. Show all posts
Showing posts with label css position. Show all posts
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;
}
Relative özelliği öğeyi yanındaki elemana göre konumlandırır ve bu konumlandırma işleminden diğer elemanlar etkilenmez.
Ö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{
position: relative;
left: 20px;
top: 30px;
background-color: red;
}
#kutu3{
background-color: green;
}
Ekran Görüntüsü
