Menggunakan CSS untuk Menempatkan Elemen HTML

• Mungkin 16, 2024

Aturan CSS memberi Anda kemampuan untuk menempatkan elemen HTML persis di tempat yang Anda inginkan. Anda dapat menyesuaikan bagaimana mereka merespons elemen lain yang ada di sekitarnya, atau bahkan menyembunyikannya sepenuhnya. Berikut ini rincian tentang properti penempatan CSS.

Tampilan: Properti ini menentukan bagaimana suatu elemen ditampilkan. Mengatur tampilan ke "tidak ada" menyembunyikan elemen sepenuhnya, sementara nilai-nilai lain dapat mengubah bagaimana suatu elemen bereaksi terhadap properti dan elemen lainnya. Misalnya, div ditetapkan untuk ditampilkan sebagai "blokir" secara default, artinya ia bertindak sebagai objek persegi panjang, tetapi Anda dapat menggunakan "tampilan: inline" untuk memaksa div untuk bertindak seperti paragraf. Atau, Anda dapat melakukan yang sebaliknya dan menggunakan "display: block" untuk memaksa paragraf bertindak seperti div.

Posisi: Menentukan bagaimana suatu elemen bereaksi terhadap elemen di sekitarnya. Elemen menggunakan "position: static" secara default, artinya elemen tersebut ditampilkan secara berurutan sebagaimana ditampilkan dalam kode HTML. "Posisi: relatif" berarti bahwa lokasi statis elemen dihitung, dan kemudian diimbangi dengan apa pun yang Anda sebutkan di properti "atas" dan "kiri". Elemen halaman lainnya bertindak seolah-olah elemen relatif masih di lokasi statis. Elemen "Position: absolute" mengabaikan lokasi statis mereka, mendasarkan posisi mereka hanya pada nilai-nilai di properti atas, kiri, kanan dan bawah. Selain itu, elemen lain akan mengabaikan elemen itu (jadi jika Anda tidak hati-hati, Anda bisa berakhir dengan beberapa tumpang tindih yang berantakan). "Position: fixed" mirip dengan "position: absolute" kecuali bahwa elemen tersebut akan menahan tempatnya meskipun pengunjung Anda menggulir halaman.

Visibilitas: Memutuskan apakah suatu elemen ditampilkan pada halaman atau tidak. Perbedaan antara "tampilan: tidak ada" dan "visibilitas: tersembunyi" adalah bahwa dalam kasus sebelumnya, elemen halaman lainnya berperilaku seolah-olah objek tidak terlihat tidak ada; dalam yang terakhir, elemen-elemen lain akan memegang tempat untuk elemen tersembunyi. Jelas, pengaturan default "terlihat."

Float: Mengatur apakah suatu elemen mengalir ke kiri atau kanan elemen lain (atau tidak mengalir sama sekali, yang merupakan default). Properti ini sangat membantu dalam mendapatkan elemen relatif diposisikan dengan benar. Anda harus menetapkan lebar untuk elemen apung atau tidak akan ditampilkan dengan benar. Juga, jika Anda menggunakan float untuk satu elemen, Anda mungkin ingin mengatur properti untuk semua elemen di sekitarnya juga.

Hapus: Properti ini bekerja bersama dengan properti "float". Ini memutuskan bagaimana elemen akan membiarkan elemen lain melayang di sekitarnya - "jelas: kiri" berarti bahwa tidak ada elemen lain yang bisa melayang ke kiri; "clear: right" menghalangi sisi kanan dan "clear: Keduanya" berarti tidak ada elemen yang bisa mengapung di kedua sisi. Pengaturan standar adalah "jelas: tidak ada" (artinya elemen lain dapat mengambang ke kedua sisi).

Petunjuk Video: CSS Layouting - #12 Position : Absolute & Fixed (Mungkin 2024).