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

Lapisan ini hanya menggunakan kedudukan: relatif; gaya

Lapisan ini hanya menggunakan kedudukan: mutlak

Tiada gaya

1. Mutlak: tidak menduduki ruang, relatif: tidak menduduki ruang!

Seperti struktur atas:

Lapisan dengan id rel akan menduduki satu baris apabila dipaparkan! Lapisan abs di belakangnya hanya akan dipaparkan pada baris seterusnya!
Apabila lapisan dengan id abs dipaparkan, ia akan bertindih dengan lapisan dengan id sss!

2. Secara lalai (kedudukan tidak digabungkan dengan atas, dsb.), kedudukan mutlak adalah berdasarkan lapisan induk
Contohnya, jika lapisan dengan id abs di atas tidak diletakkan dengan atas , dsb. , maka kedudukan paparannya akan mengikuti lapisan posi induk (posi berada di sudut kiri bawah dokumen, dan ia juga akan berada di sudut kiri bawah)

3 , kanan, kiri dan atribut lain, kedudukan mutlak ) menggunakan tetingkap sebagai kedudukan, dan relatif menggunakan penghunian sendiri sebagai garis dasar untuk mengimbangi! Seperti berikut:

Tiada gaya digunakan

Lapisan ini menggunakan kedudukan: relatif; bawah: 30px; gaya

Lapisan ini hanya menggunakan kedudukan: mutlak: 30px; >

Kod di atas:
Lapisan dengan id rel akan bergerak ke atas dan bertindih dengan lapisan dengan id sss
Lapisan dengan id abs akan bergerak ke kedudukan 30 piksel dari tetingkap menggunakan tetingkap sebagai garis dasar!

4. Apabila menggabungkan atribut atas, bawah, kanan, kiri dan lain-lain, jika anda mahu kedudukan mutlak menggunakan lapisan induk sebagai garis dasar penentududukan, hanya gunakan atribut mutlak atau relativ pada lapisan induk! :







Lapisan ini menggunakan kedudukan: relatif bawah: 30px gaya

Lapisan ini hanya menggunakan kedudukan: mutlak; bawah: 30px; Untuk lapisan posi, anda juga boleh menggunakan atribut mutlak!

Lapisan dengan id rel tidak akan terjejas dan akan diimbangi menggunakan penghunian sendiri sebagai garis dasar!

Lapisan dengan id abs menggunakan tepi bawah lapisan posi dengan id sebagai garis dasar kedudukan Jika ketinggian lapisan posi kurang daripada 30px pada masa ini, lapisan abs mungkin tidak nampak!