Maison >interface Web >tutoriel CSS >Résumé des différences entre l'échange Div CSS Absolute et relatif_Experience

Résumé des différences entre l'échange Div CSS Absolute et relatif_Experience

WBOY
WBOYoriginal
2016-05-16 12:06:391283parcourir

Pour expliquer la relation entre les deux en détail, vous devez utiliser des exemples. Veuillez d'abord regarder les exemples :

Voici des fragments de citation :
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Exemple Div + CSS, blog de Wayhome





position : absolu;

haut : 5px;
droite : 20px;



position : absolue;

gauche : 20px; >



position : absolue;

haut : 5px;

gauche : 5px;



position : relative;

gauche : 150px






1

2

>

4


5


remplissage : 20px 0 0 20px ;

position :

absolue
;


Position : relative;

gauche : 200px ; x Hauteur :

Position : AbSolute ; > Droite : 20px ;


 

Position : absolue ;

bas : 20px ;

gauche : 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.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn