Static Relative Absolute Fixed Position CSS

Sekarang kita mulai mempelajari mengenai posisi dan cara mengaturnya menggunakan css. Secara default posisi elemen atau tampilan adalah static yaitu mengikuti alur html. Umumnya alur html ada dua arah yaitu ke kanan dan lalu ke bawah. Properti position ini dapat mengubah alur tampilan yang diatur html menjadi seperti yang kita butuhkan.

Materi position ini masih berkaitan dengan materi tentang box atau kotak yaitu bagaimanan kita dapat mengatur posisinya baik mengikuti alur atau seperti yang kita butuhkan. Pada materi ini kita membahas empat posisi yang ada pada css di properti position.
  1. Static
    Static ini adalah tampilan default saat kita tidak mengatur posisinya. width dan height masih menjadi properi yang sangat penting disini.
  2. Relative
    Pada posisi relatif kita dapat menentukan (top atau bottom) atau (left atau right). width dan height masih menjadi properi yang sangat penting disini. Pada posisi relative box sudah bisa menimpa.
  3. Absolute
    Pada posisi absolute kita sudah bisa menentukan top,bottom,left,right sekaligus dan properti width height tidak lagi penting disini. Posisinya mengikuti parent. Box dapat menimpa.
  4. Fixed
    Posisi fixed hampir sama dengan posisi absolute bedanya fixed tidak bergeser posisi saat di scroll.

#file html
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
<link rel="stylesheet" type="text/css" href="position.css">
</head>
<body>
<div class="position_static">
<h3>Posisi Static</h3>
<div class="kotak_static"> Defaul Posisi Static</div>
<div class="kotak_static"> Defaul Posisi Static</div>
<div class="kotak_static"> Defaul Posisi Static</div>
<div class="kotak_static"> Defaul Posisi Static</div>
</div>

<div class="position_relative">
<h3>Posisi Relative</h3>
<div class="kotak_relative"> Posisi Relative</div>
<div class="kotak_relative"> Posisi Relative</div>
<div class="kotak_relative"> Posisi Relative</div>
<div class="kotak_relative"> Posisi Relative</div>
</div>

<div class="position_absolute">
<h3>Posisi Absolute</h3>
<div class="kotak_absolute1"> Posisi Absolute</div>
<div class="kotak_absolute2"> Posisi Absolute</div>
<div class="kotak_absolute3"> Posisi Absolute</div>
<div class="kotak_absolute4"> Posisi Absolute</div>
</div>

<div class="kotak_fixed">BWM (Posisi Fixed)</div>
</body>
</html>


#file css (position.css)
.position_static{
background-color: #bbb;
padding: 10px;
}

.position_static .kotak_static{
margin-bottom: 10px;
background: #444;
color: white;
padding: 10px;
position: static;
left: 40px;

}

.position_relative{
background-color: #fbb;
padding: 10px;
position: relative;
}

.position_relative .kotak_relative{
margin-bottom: 10px;
background: #444;
color: white;
padding: 10px;
position: relative;
left: 20px;
}

.position_absolute{
background-color: #bfb;
padding: 10px;
position: absolute;
top: 550px;
bottom: -250px;
right: 10px;
left: 10px;
padding: 10px;
}

.position_absolute .kotak_absolute1{
margin-bottom: 10px;
background-color: red;
color: white;
padding: 10px;
position: absolute;
left: 20px;
right: 10px;
top: 60px;
bottom: 0px;
}

.position_absolute .kotak_absolute2{
margin-bottom: 10px;
background: green;
color: white;
padding: 10px;
position: absolute;
left: 30px;
right: 10px;
top: 110px;
bottom: 5px;
}

.position_absolute .kotak_absolute3{
margin-bottom: 10px;
background-color: blue;
color: white;
padding: 10px;
position: absolute;
left: 40px;
right: 10px;
top: 160px;
bottom: 10px;
}
.position_absolute .kotak_absolute4{
margin-bottom: 10px;
background: #444;
color: white;
padding: 10px;
position: absolute;
left: 50px;
right: 10px;
top: 210px;
bottom: 15px;
}


.kotak_fixed{
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
color: white;
right: 20px;
background-color: red;
}

#tampilan


Terima Kasih.

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE