Elemen Posisi Pada Halaman Web Dengan Properti Posisi CSS

Mungkin 2, 2024

Sebelum Cascading Style Sheets, Anda terbatas pada kontrol yang Anda miliki atas posisi objek di halaman web Anda. Anda dapat menggunakan tabel HTML untuk sedikit mengontrol posisi tetapi ini tidak terlalu tepat. Sekarang dengan CSS, Anda dapat memiliki kontrol yang tepat atas bagaimana setiap elemen ditempatkan di halaman web Anda.

Sebelum Anda dapat menggunakan properti posisi CSS untuk memposisikan elemen pada halaman web Anda, kami perlu mendiskusikan terminologi yang digunakan untuk berkomunikasi dengan browser web. CSS tidak hanya mempertimbangkan lebar dan tinggi halaman web Anda tetapi juga dimensi browser web.

Lebar dan Tinggi Peramban
Pada awalnya, Anda mungkin berpikir ini merujuk ke jendela browser yang terbuka. Tapi itu benar-benar merujuk ke seluruh browser termasuk kontrol dan tombol.
Lebar dan Tinggi Langsung
Ini adalah istilah untuk area tampilan browser. Itu tidak termasuk kontrol.
Lebar dan Tinggi Dokumen
Ini adalah seluruh lebar dan tinggi halaman web Anda. Jika dimensi ini lebih besar dari lebar dan tinggi Live, maka browser akan menampilkan scrollbar sesuai kebutuhan.

Sekarang setelah Anda mengetahui istilah batas di mana Anda dapat memposisikan bagian-bagian halaman web Anda menggunakan CSS, mari kita lihat empat nilai posisi.

Statis
Ini standarnya. Kecuali Anda menentukan sebaliknya untuk suatu elemen, browser akan menggunakan penentuan posisi statis. Seperti kedengarannya, dengan penentuan posisi statis Anda tidak dapat memposisikan ulang elemen pada halaman web. Jadi, bagaimana browser menentukan di mana menempatkan setiap objek di halaman web Anda? Ini memposisikan setiap elemen dalam urutan yang terjadi pada kode HTML Anda. Jika Anda memiliki gambar logo, maka salam dan kemudian pemberitahuan hak cipta di HTML Anda, browser akan menempatkan ini di halaman web dalam urutan itu. Anda tidak dapat memindahkan salam di atas gambar logo.
Relatif
Penentuan posisi relatif berfungsi sama dengan statis karena urutan elemen dalam kode HTML mengontrol aliran elemen pada halaman. Namun, Anda dapat menggunakan posisi relatif untuk mengontrol posisi suatu elemen dalam kaitannya dengan elemen-elemen lain pada halaman web.
Mutlak
Saat Anda menggunakan penentuan posisi absolut dengan suatu elemen, ini akan membuat elemen itu independen dari sisa halaman web. Karena penempatannya tidak lagi ditentukan oleh urutan HTML, Anda harus menggunakan koordinat X dan Y untuk memposisikan elemen.
Tetap
Ini berfungsi sama dengan penentuan posisi absolut. Namun, elemen yang memiliki penentuan posisi tetap tidak akan menggulir dengan halaman web. Ini adalah fitur yang bagus untuk digunakan untuk logo atau menu yang Anda ingin tetap terlihat saat halaman bergulir ke atas.

Petunjuk Video: Posisi Elemen (Static Relative Absolute & Fixed ) | Tutorial CSS (part 19) (Mungkin 2024).

Elemen Posisi Pada Halaman Web Dengan Properti Posisi CSS, HTML, CSS, properti posisi CSS, posisi statis, posisi relatif, posisi absolut, posisi tetap, cara memposisikan elemen pada halaman web, gunakan CSS untuk memposisikan elemen pada halaman web

Artikel Sebelumnya

Artikel Berikutnya

InDesign CS5.5 Fitur Baru

Mungkin 2024

Ada banyak fitur baru di InDesignR CS5.5 yang akan membantu alur kerja Anda untuk merancang dan menerbitkan dokumen untuk tablet, ponsel cerdas, dan komputer. Selain terintegrasi dengan PhotoshopR,...

komputer

ActionScript 3 Sistem Partikel Salju turun di Flash

Mungkin 2024

Metode DuaMetode kedua akan memungkinkan kita untuk menggunakan hanya beberapa kepingan salju daripada terus-menerus membuat yang baru. Tetapi untuk melakukan ini, kita perlu menemukan cara untuk...