Penjelasan terperinci tentang kedudukan css: mutlak, pertukaran relatif_Pengalaman

Penjelasan tentang Buku Panduan CSS2.0:

Menetapkan nilai sifat ini kepada mutlak akan menyeret objek keluar daripada aliran dokumen biasa dan meletakkannya secara mutlak tanpa mengira susun atur kandungan di sekelilingnya. Jika objek lain dengan sifat indeks-z yang berbeza sudah menduduki kedudukan tertentu, ia tidak akan menjejaskan satu sama lain dan akan bertindih pada kedudukan yang sama. Pada masa ini, objek tidak mempunyai tampalan luar (margin), tetapi ia masih mempunyai tampalan dalam (padding) dan sempadan (sempadan).
Untuk mengaktifkan kedudukan mutlak objek, anda mesti menentukan sekurang-kurangnya satu daripada sifat kiri, kanan, atas dan bawah dan tetapkan nilai sifat ini kepada mutlak. Jika tidak, sifat di atas akan menggunakan nilai lalainya iaitu auto , yang akan menyebabkan objek mematuhi peraturan susun atur HTML biasa dan dipaparkan serta-merta selepas objek sebelumnya.

Atribut TRBL (ATAS, KANAN, BAWAH, KIRI) hanya sah apabila atribut kedudukan ditetapkan.
Apabila menetapkan position:absolute
Jika induk (infinite) tidak menetapkan atribut kedudukan, maka mutlak semasa akan digabungkan dengan atribut TRBL untuk meletakkan sudut kiri atas penyemak imbas sebagai titik asal
Jika induk (tak terhingga) ) untuk menetapkan atribut kedudukan, maka mutlak semasa diposisikan menggunakan sudut kiri atas induk (terhampir) sebagai titik asal dalam kombinasi dengan atribut TRBL.

Apabila kedudukan: relatif
ditetapkan, sudut kiri atas kawasan kandungan induk (terdekat) dirujuk sebagai titik asal dan digabungkan dengan atribut TRBL untuk kedudukan (atau relatif kepada elemen yang diposisikan dalam kawasan kandungan induk Elemen sebelumnya diimbangi), jika tiada induk, sudut kiri atas BODY digunakan sebagai titik asal. Kedudukan relatif tidak boleh disusun. Apabila menggunakan kedudukan relatif, tidak kira sama ada elemen dipindahkan atau tidak, elemen itu masih menduduki ruang asal. Oleh itu, menggerakkan elemen menyebabkan ia menutup kotak lain.

Secara umumnya, jika anda menggunakan Absolute untuk memusatkan halaman web, adalah mudah untuk membuat kesilapan, kerana halaman web sentiasa menyesuaikan diri secara automatik dengan saiz resolusi, dan Absolute akan menggunakan sudut kiri atas pelayar sebagai titik asal dan tidak akan menyesuaikan kedudukan untuk perubahan dalam resolusi. Kadangkala perlu bergantung pada indeks-z untuk menetapkan hubungan atas dan bawah bekas Semakin besar nilainya, semakin tinggi julat nilainya ialah nombor asli. Sudah tentu, satu perkara yang perlu diberi perhatian ialah hubungan ibu bapa-anak tidak boleh ditetapkan ke atas dan ke bawah menggunakan indeks-z Anak mesti berada di atas dan ibu bapa mesti berada di bawah.

Menetapkan nilai sifat ini kepada relatif akan mengekalkan objek dalam aliran HTML biasa, tetapi kedudukannya boleh diimbangi berdasarkan objek sebelumnya. Teks atau objek yang mengikuti objek yang agak berkedudukan menduduki ruang mereka sendiri tanpa menimpa ruang semula jadi objek yang diposisikan. Sebaliknya, teks atau objek yang mengikuti objek yang diletakkan secara mutlak menduduki ruang semula jadinya sehingga objek yang diposisikan diseret keluar daripada aliran dokumen biasa. Meletakkan objek dengan kedudukan mutlak di luar kawasan yang boleh dilihat akan menyebabkan bar skrol muncul. Walau bagaimanapun, jika objek yang agak kedudukannya diletakkan di luar kawasan yang boleh dilihat, bar skrol tidak akan muncul. Malah, masalah utama dengan kedudukan adalah untuk mengingati maksud setiap kedudukan. Kedudukan relatif adalah "relatif kepada" kedudukan awal elemen dalam aliran dokumen, manakala kedudukan mutlak adalah "relatif kepada" elemen nenek moyang yang sudah berada di kedudukan terdekat.

Berikut ialah tambahan:

Walaupun saya tahu kedudukan mutlak (mutlak) dan kedudukan relatif (relatif) CSS, saya tidak pernah menulis sendiri kesan yang berkaitan .
Setelah lama bekerja, akhirnya selesai juga! Saya juga memahami kedua-dua sifat ini dengan lebih baik!

Ringkasannya adalah seperti berikut:

Mari kita lihat dahulu struktur lapisan di bawah