PENGERTIAN
SleepingCodings - Position pada CSS digunakan untuk mengatur posisi sebuah element HTML, Seumpama
temen" mau membuat atau menetapkan posisi sebuah element dengan element lain. Maka di sinilah kegunaan
property Position yang terdapat di CSS ini telah saatnya kita pakai.
Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi sebuah
element HTML yaitu :
1. Static
2. Relative
3. Fixed
4. Absolute
Secara umum cara kerja posisi atau disaat temen" menetapkan posisi sebuah element, temen" pasti menggunakan property CSS lainnya seperti mengatur top, right, bottom, left untuk menetapkan posisi sebuah element. Tetapi property tersebut tidak akan bekerja apabila temen" belum atur terlebih dahulu positionnya, karena property lain tergantung dengan position yang di tetapkan.
CONTOH POSITION STATIC
Position static digunakan untuk mengatur element menjadi statis secara default, Elment akan mengikuti posisi normal secara default.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="ps-static">Ini adalah Tutorial Pemakaian/Contoh Position Static</div>
</body>
</html>
style.css
.ps-static {
background: grey;
color: #fff;
position: static;
padding: 20px;
}
ketika di jalankan di web browser :
 |
| Gambar 1.1 Css Position Static |
CONTOH POSITION RELATIVE
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="ps-relative">Ini adalah Tutorial Pemakaian/Contoh Position Relative</div>
</body>
</html>
style.css
.ps-relative {
background: darkblue;
color: lightblue;
position: relative;
padding: 20px;
}
ketika di jalankan di web browser :
 |
| Gambar 1.2 Css Position Relative |
Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap, tanpa ada perubahan bahkan jika halaman website temen" di scroll, berlaku pengaturan left, bottom, top, dan right pada position fixed.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="ps-fixed">Ini adalah Tutorial Pemakaian/Contoh Position Fixed</div>
</body>
</html>
style.css
.ps-fixed {
background-color: teal;
color: darkblue;
position: fixed;
padding: 20px;
}
ketika di jalankan di web browser :
 |
| Gambar 1.3 Css Position Fixed |
Element HTMLyang mengguakan position absolute akan tertimpa dengan element lain. Position merupakan salah satu property position css yang sangat berguna, nah salah satunya penggunaan absolute untuk membuat menu dropdown dengan HTML dan CSS.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<div class="ps-absolute">Ini adalah Tutorial Pemakaian/Contoh Position absolute</div>
</body>
style.css
.ps-absolute {
background-color: pink;
color: azure;
position: absolute;
padding: 20px;
}
ketika di jalankan di web browser :
 |
| Gambar 1.4 Css Position Absolute |
Nah, dari 4 Position di atas, memiliki fungsi masing-masing pada setiap penggunaannya sewaktu temen" membuat halaman website entah itu statis
atau website dinamis, yang perlu temen" tahu adalah pemahaman kapan saat temen" mengimplementasikan position tersebut.
Semoga Bermanfaat ~
Wassalamu'alaikum Wr. Wb
No comments:
Post a Comment