Mengapa Elemen Kedudukan Saya Yang Benar-benar Muncul di Tempat Yang Salah?

Elemen Kedudukan yang Salah Tempat: Memahami Kedudukan Mutlak dan Tetap

Kedudukan mutlak dan tetap dalam CSS membolehkan elemen diletakkan dengan tepat dalam dokumen atau kawasan pandang . Walau bagaimanapun, kadangkala elemen mungkin tidak muncul di tempat yang anda harapkan. Ini selalunya disebabkan oleh salah faham tentang cara kaedah penentududukan ini berfungsi.

Isu dengan Kedudukan Statik

Apabila elemen diletakkan secara statik (lalai), ia mengalir dengan seluruh dokumen, mengambil kedudukannya daripada elemen sekeliling. Dalam contoh yang diberikan, div kotak kelabu diletakkan secara mutlak. Walau bagaimanapun, bekas mempunyai kedudukan relatif, bukan kedudukan mutlak atau tetap. Ini bermakna kotak kelabu masih tertakluk kepada aliran dokumen dan akan diposisikan secara relatif kepada kedudukan statik bekas.

Kedudukan Mutlak dan Tetap

Mutlak penentududukan mengalih keluar elemen daripada aliran dokumen dan meletakkannya secara relatif kepada nenek moyang kedudukan terdekatnya. Jika tiada nenek moyang yang diposisikan, ia akan diposisikan secara relatif kepada dokumen itu sendiri. Kedudukan tetap adalah serupa dengan mutlak, tetapi ia meletakkan elemen relatif kepada port pandangan dan bukannya nenek moyangnya.

Dalam contoh pertama, kotak kelabu diposisikan secara mutlak, tetapi bekasnya diposisikan secara statik. Seperti yang dibincangkan sebelum ini, ini bermakna kotak kelabu akan diletakkan secara relatif kepada kedudukan statik bekas, yang tidak berada di penjuru kiri sebelah atas.

Dalam contoh kedua, kotak kelabu dialihkan sebelum kotak oren. Ini menyebabkan kotak oren menduduki ruang yang mungkin diambil oleh kotak kelabu itu. Oleh itu, kotak kelabu muncul selepas kotak oren.

Membetulkan Isu

Untuk meletakkan kotak kelabu dengan betul, bekas mesti diletakkan secara mutlak atau tetap . Ini akan membolehkan kotak kelabu diposisikan secara relatif kepada kedudukan mutlak atau tetap bekas dan bukannya kedudukan statiknya.

Berikut ialah kod yang diperbetulkan:

.container {
  background: lightblue;
  position: absolute;
}

Kini, kelabu- kotak sepatutnya muncul di penjuru kiri sebelah atas bekas seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Elemen Kedudukan Saya Yang Benar-benar Muncul di Tempat Yang Salah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!