Pourquoi mes éléments en position absolue ou fixe ne sont-ils pas là où je les attends ?-tutoriel CSS-php.cn

Pourquoi mes éléments en position absolue ou fixe ne sont-ils pas là où je les attends ?

Mary-Kate Olsen

Libérer： 2024-12-30 09:03:14

original

783 Les gens l'ont consulté

Why Aren't My Absolutely or Fixed-Positioned Elements Where I Expect Them?

Pourquoi les éléments absolument ou à position fixe ne sont pas situés là où prévu

Dans le positionnement CSS, les éléments absolument et fixes sont placés par rapport à la fenêtre ou à l'élément parent positionné le plus proche , respectivement. Cependant, comprendre leur comportement peut parfois être difficile.

Comprendre la position statique

Lorsque la propriété de position d'un élément est définie sur auto ou static, il prend la position statique. Cela signifie qu'il sera placé comme si sa position était statique. Dans ce cas, la position de l'élément est calculée en fonction de ses marges, bordures, remplissage et contenu.

Scénario 1 : Boîte grise absolue en dehors du parent relatif

Dans votre premier extrait de code, le la boîte grise a une position absolue. Cependant, le conteneur parent (

) a une position : relative; propriété, qui crée un nouveau contexte de positionnement pour ses enfants. Étant donné que la boîte grise est le dernier enfant, elle sera positionnée par rapport au bas du conteneur.

Scénario 2 : la boîte grise ne se trouve pas dans le coin supérieur gauche

Dans votre deuxième extrait de code , vous avez déplacé la case grise vers la deuxième position dans le conteneur. Cependant, il n'est toujours pas dans le coin supérieur gauche car le conteneur a un remplissage : 40px 20px; règle, qui affecte la position statique hypothétique de l’élément. La case grise sera positionnée par rapport à cette position statique ajustée.

Conclusion

Pour positionner correctement des éléments absolus ou fixes, il est crucial de comprendre la notion de position statique et comment elle est calculée basé sur les marges, les bordures, le remplissage et le contenu. Cette connaissance permet d'anticiper le comportement de ces éléments dans différents contextes de positionnement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!