Penempatan Absolut CSS
- Hal Sebelumnya Penempatan Relatif CSS
- Hal Berikutnya Gelombang CSS
Boks elemen yang diatur untuk lokasi absolut dihapus sepenuhnya dari alur dokumen dan diatur terhadap blok yang menampung, blok yang menampung mungkin adalah elemen lain di dalam dokumen atau blok yang menampung awal. Ruang yang diambil elemen sebelumnya di alur dokumen biasa akan ditutup, seperti jika elemen itu aslinya tidak ada. Setelah lokasi elemen disesuaikan, akan dihasilkan sebuah boks blok, tidak peduli jenis boks yang dihasilkan aslinya di alur biasa.
Penempatan Absolut CSS
Lokasi absolut membuat posisi elemen tidak berhubungan dengan alur dokumen, sehingga tidak mengambil ruang. Ini berbeda dengan lokasi relatif, yang sebenarnya dianggap sebagai bagian dari model lokasi alur biasa, karena posisi elemen berdasarkan posisinya di alur biasa.
Layout elemen lain di alur biasa seperti jika elemen yang berlokasi absolut tidak ada:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
seperti yang terlihat di gambar di bawah:
Posisi elemen penempatan absolut 'relatif' kepadaelemen penempatan yang paling dekatJika elemen tidak memiliki elemen penempatan yang disempatkan, posisinya 'relatif' kepadaBlok awal.
Masalah utama dalam penempatan adalah ingat makna setiap penempatan. Jadi, sekarang kita lihat kembali pemahaman yang telah dipelajari: penempatan relatif adalah 'relatif' kepada posisi awal elemen di dokumen, sementara penempatan absolut adalah 'relatif' kepada родительский элемент, yang telah disempatkan, jika tidak ada elemen yang disempatkan, maka 'relatif' kepada blok awal.
Komentar:Berdasarkan pengeceran pengguna, blok awal mungkin kanvas atau elemen HTML.
Petunjuk:Karena kotak penempatan absolut tidak berhubungan dengan aliran dokumen, jadi mereka dapat menutupi elemen lain di halaman. Dapat disetel melalui Atribut z-indexUntuk mengendalikan urutan tata letak kotak ini.
Contoh Penempatan Absolut CSS
- Penempatan: Penempatan Absolut
- Contoh ini menunjukkan bagaimana cara menggunakan nilai absolut untuk menempatkan elemen.
- Hal Sebelumnya Penempatan Relatif CSS
- Hal Berikutnya Gelombang CSS
