Pouvez-vous positionner des éléments absolument sans valeurs explicites de haut, de gauche, de bas et de droite ?

Positionnement des éléments absolument sans valeurs explicites haut/gauche/bas/droite : une plongée dans la norme

Dans le domaine du développement Web, le positionnement absolu permet de placer les éléments indépendamment de leur flux normal dans le document. Cependant, une question courante se pose lorsque l'on tente d'y parvenir sans définir explicitement les propriétés haut/gauche/bas/droite.

Comportement par défaut des valeurs automatiques

Selon le Spécification CSS2, le comportement par défaut des valeurs automatiques dans les propriétés haut/bas, gauche/droite est de leur attribuer les mêmes valeurs qu'elles auraient en position statique. Cela signifie qu'un élément avec position : absolue et les quatre valeurs automatiques se comporteront comme s'il était positionné de manière statique.

Cas n° 1 : Logo au-dessus de la photo dans l'en-tête WordPress

Dans le premier cas, positionner le logo absolument au dessus de la photo sans valeurs explicites haut/gauche/bas/droite est possible car l'élément logo est le premier enfant de son conteneur parent (en-tête). Comme l'indique la norme CSS, un premier enfant positionné de manière absolue avec des marges (ou un remplissage) sera décalé par rapport au coin supérieur gauche de son parent.

Cas n°2 : Menu horizontal à plusieurs niveaux

Dans le second cas, le menu horizontal à plusieurs niveaux peut être disposé à l'aide de display: table-*, mais les cellules du tableau ne prennent pas en charge le positionnement relatif. Cependant, en utilisant position: Absolute sur les éléments de menu et en laissant les propriétés top/bottom, left/right sur auto, le comportement par défaut garantira que ces éléments sont positionnés en fonction de leurs valeurs de position statiques, émulant efficacement le positionnement relatif dans la cellule du tableau. contexte.

Compatibilité des navigateurs

Bien que cette technique adhère à la spécification CSS2 et devrait fonctionner en théorie, il est important de noter que la prise en charge du navigateur pour le positionnement absolu sans valeurs explicites haut/gauche/bas/droite peut varier. Certains navigateurs plus anciens, tels que Firefox 0.8 et IE6-7, peuvent présenter un comportement inattendu. Néanmoins, cela reste une approche valable qui peut apporter de la flexibilité dans certaines situations.

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!