Mengatur posisi atau position elemen dengan CSS
Pada CSS Anda bisa mengatur letak posisi setiap elemen, ini sangat berguna untuk desain tata letak ya
Kegunaan position pada CSS
Pada CSS sendiri Anda bisa mengatur letak posisi setiap elemen, ini sangat berguna untuk desain tata letak yang baik. Didalam CSS ada beberapa metode yang bisa Anda gunakan untuk menentukan posisi elemen dengan properti position. Pada properti position Ada lima nilai yang bisa Anda gunakan:
- static
- relative
- absolute
- fixed
- sticky
Agar berfungsi Anda juga perlu mengatur arah posisi yang lebih spesifik dengan properti: top, right, bottom dan left, mereka juga bekerja secara berbeda tergantung pada nilai posisi.
Posisi static
Elemen HTML secara default diposisikan static. Posisi static tidak diposisikan dengan cara khusus apa pun, melainkan diposisikan sesuai dengan aliran normal halaman. Elemen posisi static tidak bisa dipengaruhi oleh properti top, right, bottom dan left.
div {
border: 2px solid blue;
position: static;
}Posisi relative
Elemen dengan posisi relative diposisikan relative terhadap posisi normalnya. Dengan posisi relative Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan relative dapat tumpang tindih dengan elemen lain, dan menjaga ruang yang awalnya disediakan dalam aliran normal.
#relative {
background-color: yellow;
position: relative;
top: 20px;
left: 100px;
width: 30%;
height: 80px;
}Posisi absolute
Elemen dengan posisi absolute diposisikan sepenuhnya keluar dari aliran normalnya. Dengan posisi absolute Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan absolute dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.
Jika posisi absolute dibungkus dengan posisi relative, maka akan mengikuti posisi kordinat dari pembungkusnya (relative). Namun jika posisi absolute tidak memiliki pembungkus yang mempunyai posisi relative, maka ia menggunakan elemen <body> sebagai kordinatnya.
Contoh posisi absolute yang dibungkus dengan posisi relative:
#relative {
background-color: grey;
position: relative;
width: 80%;
height: 300px;
}
#absolute {
background-color: yellow;
position: absolute;
top: 50px;
left: 100px;
width: 40%;
height: 100px;
}Contoh posisi absolute yang TIDAK dibungkus dengan posisi relative:
#container {
background-color: yellow;
width: 80%;
height: 300px;
}
#absolute {
background-color: lightgrey;
position: absolute;
top: 50px;
left: 100px;
width: 40%;
height: 100px;
}Posisi fixed
Elemen dengan posisi fixed digunakan untuk memberikan posisi tetap bahkan jika halaman tersebut digulir. Dengan posisi fixed Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan fixed dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.
#fixed {
background-color: red;
position: fixed;
left: 70px;
width: 50%;
height: 100px;
}Posisi sticky
Elemen dengan posisi sticky digunakan untuk toggle posisi relative dan posisi fixed. Ini diposisikan relatif sampai posisi offset yang diberikan bertemu di viewport – kemudian “sticky” di tempatnya. Dengan posisi sticky Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan sticky dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.
#sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 15px;
background-color: lightgrey;
border: 3px solid blue;
}Jangan lupa menentukan properti position, jika tidak sticky tidak akan berjalan.
Posisi elemen tumpang tindih
Ketika elemen diposisikan, maka mereka dapat tumpang tindih dengan elemen yang lainnya. Dengan properti z-index Anda bisa mengatur untuk menentukan elemen mana yang akan ditempatkan dibelakang dan elemen mana yang akan ditempatkan didepan.
p {
position: absolute;
left: 10px;
top: 10%;
z-index: -1;
background-color: red;
}Nilai properti z-index mendukung nilai positif atau negatif. Elemen dengan urutan tumpukan lebih besar selalu didepan elemen dengan urutan tumpukan lebih rendah. Jika dua elemen yang diposisikan tumpang tindih tanpa properti z-index yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di atas.
Daftar properti position
| Properti | Kegunaanya |
|---|---|
| position | Mengatur jenis posisi pada elemen |
| top | Menentukan posisi sebelah atas |
| right | Menentukan posisi sebelah kanan |
| bottom | Menentukan posisi sebelah bawah |
| left | Menentukan posisi sebelah kiri |
| z-index | Mengatur susunan elemen |