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.
-
Static
Static ini adalah tampilan default saat kita tidak mengatur
posisinya. width dan height masih menjadi properi yang sangat penting
disini.
-
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.
-
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.
-
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.
