#15 CSS – Position : Static, Relative, Absolute dan Fixed

Static

Static merupakan value position bawaan setiap element. Setiap position static tidak bisa diberikan nilai top, left, right dan bottom.

Relative

Pemberian nilai relative terhadap suatu element memberikan kita akses terhadap nilai top, left, right dan bottom. Nilai top, left, right dan bottom relative terhadap posisi awal element tersebut.

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">

</head>

<body>
    <div class="satu"></div>
    <div class="dua"></div>
    <div class="tiga"></div>
</body>

</html>

style.css

div {
    height: 100px;
    width: 100px;
}

.satu {
    background-color: brown;
}

.dua {
    background-color: darkgreen;
    position: relative;
    left: 50px;
    top: 50px;
}

.tiga {
    background-color: deepskyblue;
}

Absolute

Element yang diberikan nilai absolute akan dianggap hilang dari posisi sebelumnya berbeda dengan relative yang meninggalkan ruang kosong. Pemberian nilai top, left, right dan bottom juga berbeda dengan nilai relative, jika nilai relative akan bergerak relative terhadap posisi awalnya sedangkan absolute akan bergerak/bergeser berdasarkan parent.

style.css

body {
    margin: 0;
    padding: 0;
}

div {
    height: 200px;
    width: 200px;
}

.satu {
    background-color: brown;
}

.dua {
    background-color: darkgreen;
    position: absolute;
    left: 50px;
    top: 100px;
}

.tiga {
    background-color: deepskyblue;
}
position-absolute

Fixed

Fixed merupakan nilai position yang membuat suatu element akan memiliki posisi yang tetap terhadap window browser dan tidak terpengaruh oleh element parent. Nilai fixed biasa digunakan dalam pembuatan navbar.

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *