Di CSS Anda dapat mengatur posisi setiap elemen, ini sangat berguna untuk desain tata letak
Diperbarui. 23 Januari 2021
Penggunaan posisi di CSS
Pada CSS sendiri Anda dapat mengatur posisi setiap elemen, hal ini sangat berguna untuk desain tata letak yang baik. Di CSS ada beberapa metode yang bisa anda gunakan untuk menentukan posisi elemen dengan properti position. Pada properti posisi ada lima nilai yang bisa Anda gunakan
- statis
- relatif
- sangat
- tetap
- lengket
Agar berfungsi, Anda juga perlu mengatur arah posisi yang lebih spesifik dengan properti. top, right, #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }0 dan #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }1, mereka juga bekerja secara berbeda tergantung pada nilai posisi
Informasi. posisi jika diterjemahkan ke dalam bahasa Indonesia berarti posisi
Posisi statis
Elemen HTML secara default diposisikan secara statis. Posisi statis tidak diposisikan dengan cara tertentu, melainkan diposisikan sesuai dengan alur normal halaman. Elemen posisi statis tidak dapat dipengaruhi oleh properti top, right, #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }0 dan #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }1
div { border: 2px solid blue; position: static; }_
CopyLighting
Editor daring
Posisi relatif
Elemen dengan posisi relatif diposisikan relatif terhadap posisi normalnya. Dengan posisi relatif, Anda dapat mengatur posisi dengan properti top, right, #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }0 dan #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }1. Elemen yang diposisikan secara relatif dapat tumpang tindih dengan elemen lain, dan mempertahankan ruang yang awalnya disediakan dalam aliran normal
#relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }
CopyLighting
Editor daring
Posisi absolut
Elemen dengan posisi absolut diposisikan sepenuhnya di luar aliran normalnya. Dengan posisi absolut Anda dapat mengatur posisi dengan properti top, right, #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }0 dan #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }1. Elemen dengan posisi absolut dapat tumpang tindih dengan elemen lain, dan tidak mempertahankan ruang yang semula 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 sebagai kordinatnya.
Contoh posisi absolut dibungkus dengan posisi relatif
#relative { background-color: grey; position: relative; width: 80%; height: 300px; } #absolute { background-color: yellow; position: absolute; top: 50px; left: 100px; width: 40%; height: 100px; }
CopyLighting
Editor daring
Contoh posisi absolut yang TIDAK dibungkus dengan posisi relatif
#container { background-color: yellow; width: 80%; height: 300px; } #absolute { background-color: lightgrey; position: absolute; top: 50px; left: 100px; width: 40%; height: 100px; }
CopyLighting
Editor daring
Posisi tetap
Elemen dengan posisi tetap digunakan untuk memberikan posisi tetap meskipun halaman digulir. Dengan posisi tetap, Anda dapat mengatur posisi dengan properti top, right, #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }0 dan #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }1. Elemen yang diposisikan tetap dapat tumpang tindih dengan elemen lain, dan tidak mempertahankan ruang yang semula disediakan dalam aliran normal
#fixed { background-color: red; position: fixed; left: 70px; width: 50%; height: 100px; }
CopyLighting
Editor daring
Posisi lengket
Elemen dengan posisi lengket digunakan untuk mengubah posisi relatif dan posisi tetap. Ini diposisikan relatif sampai posisi offset yang diberikan bertemu dengan viewport - lalu "lengket" di tempatnya. Dengan sticky position, Anda dapat mengatur posisi dengan properti top, right, #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }0 dan #relative { background-color: yellow; position: relative; top: 20px; left: 100px; width: 30%; height: 80px; }1. Elemen yang diposisikan lengket dapat tumpang tindih dengan elemen lain, dan tidak mempertahankan ruang yang semula disediakan dalam aliran normal
#sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 15px; background-color: lightgrey; border: 3px solid blue; }
CopyLighting
Editor daring
Jangan lupa untuk menentukan properti position, jika tidak sticky tidak akan berjalan
Informasi. Internet Explorer, Edge 15, dan versi browser yang lebih lama tidak mendukung posisi lengket. Safari membutuhkan awalan -webkit- agar berfungsi
Posisi elemen yang tumpang tindih
Saat elemen diposisikan, mereka dapat tumpang tindih dengan elemen lain. Dengan properti #container { background-color: yellow; width: 80%; height: 300px; } #absolute { background-color: lightgrey; position: absolute; top: 50px; left: 100px; width: 40%; height: 100px; }_3 Anda dapat mengatur untuk menentukan elemen mana yang akan ditempatkan di belakang dan elemen mana yang akan ditempatkan di depan
p { position: absolute; left: 10px; top: 10%; z-index: -1; background-color: red; }
CopyLighting
Editor daring
Nilai properti z-index mendukung nilai positif atau negatif. Elemen dengan urutan tumpukan yang lebih tinggi selalu berada di depan elemen dengan urutan tumpukan yang lebih rendah. Jika dua elemen yang diposisikan tumpang tindih tanpa properti indeks-z yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di atas