Zusammenfassung der Unterschiede zwischen Div CSS absolute und relative_Experience-Austausch

Um den Zusammenhang zwischen den beiden im Detail zu erklären, müssen Sie sich zunächst die Beispiele ansehen:

Das Folgende sind Zitatfragmente:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Position: absolut;

oben: 5px;

rechts: 20px;



Position: absolut;

links: 20px;

Position: absolut;

oben: 5px;

links: 5px;

Position: relativ;

links: 150px;

1

2

>

4

5

Auffüllung: 20px 0 0 20px;

Position:
absolut

;

Position: relativ

;

links: 200px; Höhe: 300px;
Position: Absolut;
Rechts: 20px;


　

Position: absolut;

unten: 20px;

links: 20px; >

Absolu : Positionnement absolu, méthode d'écriture CSS "position : absolue;", son positionnement se divise en deux situations, comme suit :

1. Lorsque Haut, Droite, Bas et Gauche ne sont pas définis, la valeur par défaut est basée sur le « point d'origine de la zone de contenu » du parent comme point d'origine. La partie rouge dans l'exemple ci-dessus (la zone jaune de. ​​le parent a l'attribut Padding, le "point de coordonnées d'origine" et le "point d'origine de la zone de contenu" sont différents).

2. Il existe des cas où Top, Right, Bottom et Left sont définis. Il existe deux cas comme suit :

(1) Le parent n'a aucun attribut de position et le supérieur. Le coin gauche du navigateur (c'est-à-dire le corps) est positionné comme le "point de coordonnées d'origine". La position est déterminée par les attributs Top, Right, Bottom et Left, comme indiqué dans la partie verte de l'exemple ci-dessus.

　(2). Le parent a l'attribut position, et le « point de coordonnées d'origine » du parent est le point d'origine, comme indiqué dans la partie bleu clair de l'exemple ci-dessus.

relatif : positionnement relatif, méthode d'écriture CSS "position : relative;", faites référence au "point d'origine de la zone de contenu" du parent comme point d'origine, s'il n'y a pas de parent, utilisez le "point d'origine point de la zone de contenu" du corps comme point d'origine, la position est déterminée par les attributs Top, Right, Bottom et Left, et a la fonction de "s'étendre ou d'occuper la hauteur", comme indiqué dans la partie orange du exemple ci-dessus.

Grâce aux exemples et explications ci-dessus, je pense qu'il n'est pas très difficile d'utiliser efficacement l'absolu et le relatif. Il existe de nombreux bons exemples d'absolu et de relatif autour de nous, comme la page d'accueil de "NetEase 163 Free Shipping. " ( http://mail.163.com), il contient de nombreuses applications.

L'exemple de code a réussi le test dans IE5.5, IE6, FF1.5 et Opera9.