Dalam HTML / CSS, apa perbedaan antara penentuan posisi absolut dan posisi relatif?


Jawaban 1:

Relatif:

Unsur dengan posisi: relatif; diposisikan relatif terhadap posisi normalnya.

Menyetel properti atas, kanan, bawah, dan kiri dari elemen yang diposisikan relatif akan membuatnya jauh dari posisi normalnya. Konten lain tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen.

cari tahu lebih lanjut tentang Layout CSS - Posisi properti

Mutlak:

Unsur dengan posisi: absolut; diposisikan relatif terhadap leluhur diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti tetap).

Namun; jika elemen yang diposisikan mutlak tidak memiliki leluhur yang diposisikan, ia menggunakan badan dokumen, dan bergerak bersama dengan pengguliran halaman.

Catatan: Elemen "diposisikan" adalah elemen yang posisinya sama dengan statis.

cari tahu lebih lanjut tentang Layout CSS - Posisi properti

Sumber: w3schools


Jawaban 2:

Itu rusak apakah atau tidak menggunakan tempat itu disediakan. Ketika HTML ditata, itu membentuk semacam tumpukan, jadi satu demi satu turun halaman. Jika satu hal dihapus, semuanya bergerak untuk mengisi ruangnya.

Dengan posisi relatif, ruang itu diadakan untuk itu. Jadi, bahkan jika Anda memindahkan elemen dengan CSS atas / kiri, ruang yang dimaksudkan tidak akan tersentuh.

Namun, saat Anda menetapkan penentuan posisi absolut, ia dikeluarkan dari tumpukan ini dan semua yang ada di bawahnya bergerak untuk menggantikannya. Itu pada layer terpisah dan tidak mempengaruhi halaman lagi. Diposisikan berdasarkan induk terdekat yang memiliki posisi relatif.

Ada satu jenis lagi, dan itu sudah diperbaiki. Ini seperti penentuan posisi absolut, kecuali ia menggunakan jendela peramban sebagai rujukannya dan karenanya bahkan tidak terhubung ke pengguliran dan akan tetap di tempatnya bahkan jika halaman tersebut digulir.


Jawaban 3:

Itu rusak apakah atau tidak menggunakan tempat itu disediakan. Ketika HTML ditata, itu membentuk semacam tumpukan, jadi satu demi satu turun halaman. Jika satu hal dihapus, semuanya bergerak untuk mengisi ruangnya.

Dengan posisi relatif, ruang itu diadakan untuk itu. Jadi, bahkan jika Anda memindahkan elemen dengan CSS atas / kiri, ruang yang dimaksudkan tidak akan tersentuh.

Namun, saat Anda menetapkan penentuan posisi absolut, ia dikeluarkan dari tumpukan ini dan semua yang ada di bawahnya bergerak untuk menggantikannya. Itu pada layer terpisah dan tidak mempengaruhi halaman lagi. Diposisikan berdasarkan induk terdekat yang memiliki posisi relatif.

Ada satu jenis lagi, dan itu sudah diperbaiki. Ini seperti penentuan posisi absolut, kecuali ia menggunakan jendela peramban sebagai rujukannya dan karenanya bahkan tidak terhubung ke pengguliran dan akan tetap di tempatnya bahkan jika halaman tersebut digulir.