Posisi sebuah elemen dapat diatur menggunakan CSS misalnya kita mau tempatkan diatas, kiri, kanan atau dibawah. Kita juga bisa menempatkan sebuah elemen secara bertumpuk (ovelap) dimana satu elemen berada diatas elemen yang lain. Dengan CSS kita juga bisa membuat aturan posisi saat elemen terlalu besar pada halaman html.
Untuk mengatur posisi elemen, kita bisa menggunakan properti CSS top, bottom, left dan right. Namun properti-properti ini akan bekerja hanya jika sebelumnya kita mengeset properti position untuk menentukan metode position.
Metode CSS dalam menentukan posisi sebuah elemen ada empat macam, yaitu :
- Static Positioning
- Fixed Positioning
- Relative Positioning
- Absolute Positioning
- Ovelapping Elements
Berikut ini penjelasan dari beberapa metode dalam mengatur posisi sebuah elemen :
1. Static Positioning
Adalah cara menempatkan elemen secara statis bergantung dari posisi penempatannya secara default pada sebuah halaman. Metode penemptan secara static tidak terpengaruh properti top, bottom, left dan right.
Contoh penempatan elemen secara static :
<html>
<head>
<title>Contoh Penempatan Elemen Statis</title>
</head>
<body>
<p>Tulisan paling atas</p>
<p>Tulisan dibawahnya</p>
</body>
</html>
Pada contoh diatas kita membuat penempatan secara statis untuk paragraf pertama pada posisi paling atas dan paragraf kedua yang berada dibawah paragraf pertama.
2. Fixed Positioning
Adalah cara penempatan elemen secara tetap (fixed) pada sebuah area pada browser. Posisi elemen tidak akan berubah meskipun kita men-scroll browser.
Penempatan elemen secara Fixed membuat elemen keluar dari struktur penempatan elemen pada sebuah halaman. Halaman akan menganggap elemen terebut tidak ada dan akibatnya elemen dengan fixed position dapat mengoverlap elemen lain pada halaman tersebut.
Contoh penempatan elemen secara fixed :
p.pos_fixed {
position: fixed;
top: 50px;
right: 10px;
}
Kita bisa berlatih CSS Fixed Position disini >>
3. Relative Positioning
Adalah cara menempatkan elemen secara relatif dari posisi elemen tersebut pada sebuah halaman. Jadi kita menempatkan elemen dengan jarak tertentu dari posisi elemen tersebut.
Sebuah isi dengan relative position dapat saja mengoverlap elemen yang lain namun space-nya tetap mengacu pada aturan halaman normal. Relative Positioning biasanya digunakan sebagai container block untuk elemen yang diposisikan secara absolut.
Contoh penempatan elemen secara relative :
h2.pos_left {
position: relative;
left: -50px;
}
h2.pos_right {
position: relative;
right: 30px;
}
h2.pos_top {
position: relative;
top: -50px;
}
Kita bisa berlatih CSS Relative Position disini >>
4. Absolute Positioning
Adalah Cara penempatan elemen secara absolute yaitu mengacu pada posisi relatif dari elemen induk pertama yang memiliki posisi lain selain statis. Jika tidak ditemukan, maka acuan elemen adalah <html>.
Contoh penempatan elemen secara absolute :
h2 {
position: absolute;
left: 120px;
top: 100px;
}
Elemen dengan absolute position keluar dari struktur penempatan elemen pada sebuah halaman. Halaman akan menganggap elemen terebut tidak ada dan akibatnya elemen dengan absolute position dapat mengoverlap elemen lain pada halaman tersebut.
Kita bisa berlatih CSS Absolute Position disini >>
5. Overlapping Elements
Adalah cara untuk mengatur overlap elemen karena berada diluar penempatan elemen pada halaman html. Properti yang digunakan untuk mengatur penempatan overlap elemen adalah z-index.
Nilai z-index bisa berupa nilai positif atau negatif. Nilai z-index yang lebih kecil akan berada dibawah elemen yang nilai z-indexnya lebih besar.
Contoh penggunaan z-index pada overlap elemen :
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Kita bisa berlatih Overlap elemen disini >>
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
