Ringkasan perbezaan antara pertukaran CSS mutlak Div ​​dan relatif_Pengalaman

Untuk menerangkan hubungan antara kedua-duanya secara terperinci, anda perlu menggunakan contoh Sila lihat contoh dahulu:

Berikut ialah serpihan petikan:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

kedudukan: mutlak;

atas: 5px;

kanan: 20px;



kedudukan: mutlak;

kiri: 20px;

kedudukan: mutlak;

atas: 5px;

kiri: 5px;

kedudukan: relatif;

kiri: 150px;

1

2

>

4

5

🎜> pelapik: 20px 0 0 20px;

kedudukan:
mutlak

;

Kedudukan: relatif

;
kiri: 200px; x ; Tinggi: 300px; > Kanan: 20px;

　
Kedudukan: mutlak;

bawah: 20px;

kiri: 20px; >
>

Mutlak: Kedudukan mutlak, kaedah penulisan CSS "kedudukan: mutlak;", kedudukannya dibahagikan kepada dua situasi, seperti berikut:

1. Apabila Atas, Kanan, Bawah dan Kiri tidak ditetapkan, lalai adalah berdasarkan "titik asal kawasan kandungan" induk sebagai titik asal Bahagian merah dalam contoh di atas (kawasan kuning induk mempunyai atribut Padding, "titik asal koordinat" dan "Titik asal kawasan kandungan" adalah berbeza).

2. Terdapat kes di mana Atas, Kanan, Bawah dan Kiri ditetapkan. Terdapat dua kes seperti berikut:

(1) Induk tidak mempunyai atribut kedudukan dan atas sudut kiri penyemak imbas (iaitu Badan) diletakkan sebagai "titik koordinat asal". Kedudukan ditentukan oleh atribut Atas, Kanan, Bawah dan Kiri, seperti yang ditunjukkan dalam bahagian hijau contoh di atas.

　(2) Induk mempunyai atribut kedudukan, dan "titik asal koordinat" ibu bapa ialah titik asal, seperti yang ditunjukkan dalam bahagian biru muda contoh di atas.

relatif: kedudukan relatif, kaedah penulisan CSS "kedudukan: relatif;", rujuk kepada "titik asal kawasan kandungan" induk sebagai titik asal, jika tiada induk, gunakan "asal titik kawasan kandungan" Badan sebagai titik asal , kedudukan ditentukan oleh atribut Atas, Kanan, Bawah dan Kiri, dan mempunyai fungsi "mengembangkan atau menduduki ketinggian", seperti yang ditunjukkan dalam bahagian oren contoh di atas.

Melalui contoh dan penjelasan di atas, saya percaya bahawa tidaklah sukar untuk menggunakan mutlak dan relatif secara mahir Terdapat banyak contoh baik mutlak dan relatif di sekeliling kita, seperti laman utama "NetEase 163 Penghantaran Percuma. " ( http://mail.163.com ), terdapat banyak aplikasi di dalamnya.

Kod contoh lulus ujian dalam IE5.5, IE6, FF1.5 dan Opera9.