Trois façons de mise en page HTML CSS (mise en page naturelle/mise en page fluide/mise en page positionnée)_HTML/Xhtml_Production de pages Web

1. Mise en page naturelle
Une mise en page sans aucune modification est automatiquement déplacée vers la gauche.
2. Disposition fluide
La situation float:left mentionnée ci-dessus.
3. Disposition du positionnement
Le positionnement relatif et le positionnement absolu sont relatifs à la balise div parent.
Relatif------prendre la position d'origine de cet élément comme point de référence.
Absolu--prendre l'origine (coin supérieur gauche) de la balise div parent comme point de référence.

Puisque le calque externe est position:relative, si le calque interne est absolu, le coin supérieur gauche du calque externe sera aligné comme référence de déplacement. Bien sûr, seule position:relative est écrite dans la couche externe, et les deux valeurs​​gauche et haut sont écrites, ce qui signifie que la position d'origine de cet élément est utilisée comme origine de référence de mise en page pour l'alignement à gauche et en haut. .

Une autre situation est qu'il y a juste une position : absolue ; il n'y a pas de position : relative dans la couche externe. Dans ce cas, quel point sera trouvé comme référence ? Le principe à ce moment est le suivant : s'il y a un relatif dans un élément parent, l'élément parent sera utilisé comme origine de référence. S'il n'y a pas de position:relative, le corps sera utilisé comme origine de référence. S'il n'y a pas de relatif dans la couche externe de position:absolute, il n'y a aucune différence entre les deux mises en page.

Bien sûr, la dernière situation est : la couche externe est : position : absolue ; la couche interne est position : relative, que va-t-il se passer ? Selon le principe original, absolu fera référence au corps comme origine de la mise en page, et relatif fera référence à sa position d'origine comme origine de la mise en page. À ce stade, il fait en fait référence au coin supérieur gauche de la couche externe comme origine de la mise en page. .
D'autres dépendront de la situation réelle.