Pourquoi les éléments positionnés de manière absolue semblent-ils parfois mal alignés ?

Comprendre les positions par défaut pour les éléments absolument positionnés

Lors de l'utilisation de la propriété position : absolue, il est courant de rencontrer des problèmes avec des éléments mal alignés. Cela se produit lorsque les valeurs par défaut de ces propriétés ne sont pas celles attendues.

En HTML, les éléments positionnés de manière absolue sont placés sans affecter le contenu environnant. Cependant, par défaut, les valeurs du haut, de la gauche, du bas et de la droite ne sont pas définies sur 0.

Les valeurs par défaut

Au lieu de cela, la valeur par défaut de toutes ces propriétés est auto. Cela signifie que la position de l'élément est calculée en fonction de son bloc conteneur, qui est l'élément ancêtre le plus proche avec une position non statique.

Lorsque les trois propriétés (gauche, largeur et droite) sont définies sur auto, la position de l'élément est déterminée par rapport à la position statique, c'est-à-dire sa position d'origine s'il n'était pas positionné de manière absolue.

Selon la spécification CSS (section 10.3.7) :

Si les trois éléments « gauche », « largeur » et « droite » sont « auto » : définissez d'abord les valeurs « auto » pour « marge-gauche » et « marge-droite ». ' à 0. Ensuite, si la propriété 'direction' de l'élément établissant le bloc contenant la position statique est 'ltr', définissez 'left' sur la position statique et appliquez la règle numéro trois ci-dessous ; sinon, définissez « droite » sur la position statique et appliquez la règle numéro un ci-dessous.

De même, pour les dimensions verticales, les propriétés (haut, hauteur et bas) sont calculées comme suit (section 10.6.4) :

Si les trois éléments « haut », « hauteur » et « bas » sont automatiques, réglez « haut » sur la position statique et appliquez la règle numéro trois. ci-dessous.

En termes plus simples, la position par défaut est la position d'origine de l'élément dans la mise en page, même s'il est en position absolue.

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!