Maison >interface Web >tutoriel CSS >Explication détaillée des différences et utilisation des quatre valeurs de l'attribut Position : statique, fixe, relative, absolue

Explication détaillée des différences et utilisation des quatre valeurs de l'attribut Position : statique, fixe, relative, absolue

高洛峰
高洛峰original
2017-03-16 09:52:412349parcourir

1, statique (positionnement statique) : Valeur par défaut. Sans positionnement, l'élément apparaît dans le flux de documents normal (si set -indexCes attributs ne sont pas artificiels). 2. Relatif (positionnement relatif) : générez des éléments positionnés relativement et positionnez-les par rapport à leurs positions d'origine via les paramètres haut, bas, gauche et droite. La classification hiérarchique peut être effectuée via z-index. ​3. Absolu (Positionnement absolu) : Générez un élément positionné de manière absolue et positionnez-le par rapport au premier élément parent qui contient un positionnement (sauf positionnement statique). La position de l'élément est définie à l'aide des propriétés "left", "top", "right" et "bottom". La notation hiérarchique peut également être effectuée via z-index. 4. Fixe (positionnement fixe) : Générez des éléments positionnés de manière absolue et positionnez-les par rapport à la fenêtre du navigateur. La position de l'élément est définie à l'aide des attributs "left", "top", "right" et "bottom". La notation hiérarchique peut également être effectuée via z-index.

L'attribut z-index définit l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement supérieur apparaîtront toujours devant les éléments avec un ordre d'empilement inférieur. Autrement dit, les éléments avec de grandes valeurs d'attribut sont empilés sur des éléments avec de petites valeurs d'attribut, mais la condition préalable est des éléments du même niveau (

Remarque : l'index Z ne peut fonctionner que sur des éléments positionnés, et les éléments peuvent ont des attributs d'index z négatifs.

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!

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