Welcome to My Blog 👋

Java, Spring Framework, Microservices, Docker, Kubernetes, AWS and Others 🚀
Follow Me

CSS - Position Özelliği ve Relative Örneği



  May 01, 2018    Labels:,,,,,,,,,,,,,, 

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.
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>

CSS Dosyası

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ü


No comments:

Post a Comment