Pada tututorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 12 : Cara Menggunakan Properti Overflow di CSS. Selanjutnya, kita akan mempelajari cara menggunakan properti position di CSS.
CSS membantu Anda untuk memposisikan elemen HTML. Anda dapat meletakkan elemen HTML apa pun di lokasi mana pun yang Anda suka.
Anda dapat menentukan apakah Anda ingin elemen diposisikan relatif terhadap posisi aslinya di halaman atau absolut berdasarkan elemen induknya.
Sekarang, kita akan melihat semua properti terkait position CSS dengan contoh :
Relatif Position
Posisi relative mengubah posisi elemen HTML relatif ke tempat biasanya muncul. Jadi, nilai “left: 20px” artinya menambahkan 20 px ke posisi LEFT elemen.
Anda dapat menggunakan 2 buah nilai yaitu top dan left secara bersamaan dengan properti position untuk memindahkan elemen HTML ke mana saja dalam dokumen HTML.
- Move Left – Gunakan nilai negatif untuk membuat posisi ke kiri.
- Move Right – Gunakan nilai positif untuk untuk membuat posisi ke kiri.
- Move Up – Gunakan nilai negatif untuk membuat posisi ke atas.
- Move Down – Gunakan nilai positif untuk membuat posisi ke atas.
CATATAN – Anda dapat menggunakan nilai bottom atau right dengan cara yang sama seperti top dan left.
Berikut contohnya :
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
Tag div ini memiliki posisi relative.
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Absolute Position
Elemen dengan posisi: absolute akan diposisikan pada koordinat yang ditentukan relatif terhadap sudut kiri atas layar Anda.
Anda dapat menggunakan 2 nilai top dan left bersama dengan properti position untuk memindahkan elemen HTML ke mana saja dalam dokumen HTML.
- Move Left – Gunakan nilai negatif untuk membuat posisi ke kiri.
- Move Right – Gunakan nilai positif untuk untuk membuat posisi ke kiri.
- Move Up – Gunakan nilai negatif untuk membuat posisi ke atas.
- Move Down – Gunakan nilai positif untuk membuat posisi ke atas.
CATATAN – Anda dapat menggunakan nilai bottom atau right dengan cara yang sama seperti top dan left.
Berikut ini contohnya :
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
Tag div ini memiliki posisi absolute.
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Fixed Position
Posisi Fixed memungkinkan Anda memperbaiki posisi elemen ke tempat tertentu di halaman, apa pun penggulirannya.
Koordinat yang ditentukan akan relatif terhadap jendela browser.
Anda dapat menggunakan 2 nilai top dan left bersama dengan properti position untuk memindahkan elemen HTML ke mana saja dalam dokumen HTML.
- Move Left – Gunakan nilai negatif untuk membuat posisi ke kiri.
- Move Right – Gunakan nilai positif untuk untuk membuat posisi ke kiri.
- Move Up – Gunakan nilai negatif untuk membuat posisi ke atas.
- Move Down – Gunakan nilai positif untuk membuat posisi ke atas.
CATATAN – Anda dapat menggunakan nilai bottom atau right dengan cara yang sama seperti top dan left.
Berikut contohnya :
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
Tag div memiliki posisi fixed.
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda mempelajari cara menggunakan porperti position di CSS untuk mengatur posisi elemen yang tampil di layar.
0 Komentar