Quelles sont les valeurs par défaut des propriétés « position : absolue » et pourquoi provoquent-elles un désalignement ?-tutoriel CSS-php.cn

Quelles sont les valeurs par défaut des propriétés « position : absolue » et pourquoi provoquent-elles un désalignement ?

Barbara Streisand

Libérer： 2024-11-07 09:43:02

original

670 Les gens l'ont consulté

What are the Default Values for `position: absolute` Properties and Why Do They Cause Misalignment?

Valeurs par défaut pour la position : absolue en cas de désalignement inattendu

Dans les projets de développement Web, les développeurs rencontrent parfois des problèmes de désalignement des éléments lors de l'utilisation du positionnement absolu. Pour contourner le problème, définir position: Absolute sans paramètres explicites résout parfois le problème. Cela soulève la question de savoir quelles sont les valeurs par défaut de ces paramètres.

Bien que le positionnement absolu place conceptuellement un élément par rapport à son bloc conteneur, les valeurs par défaut des propriétés top, left, bottom et right ne sont pas intuitif. Contrairement aux attentes, elles ne sont pas définies sur 0.

Comme spécifié dans la spécification niveau 3 du CSS Working Group, la valeur par défaut de toutes ces propriétés est auto. Cela signifie que l'élément reste dans sa position statique, comme s'il n'était pas positionné de manière absolue.

Par exemple, considérons le code suivant :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  position:absolute;
}
</style>
</head>

<body>
<h1>Absolute pos</h1>
<p>Paragraph</p>
</body>

</html>

Copier après la connexion

Sans aucun positionnement explicite, l'élément h1 reste dans sa position d'origine :

[Image de l'élément h1 positionné dans le coin supérieur gauche du layout]

Le positionnement d'un élément positionné de manière absolue est déterminé par la contrainte suivante :

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

Copier après la connexion

Si les trois éléments « gauche », « largeur » et « droite » sont « auto », la valeur « gauche » est définie sur la position statique. De même, le positionnement vertical est contraint par :

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

Copier après la connexion

Si les trois éléments "haut", "hauteur" et "bas" sont "auto", la valeur "haut" est définie sur la position statique. .

En conclusion, lors de l'utilisation d'un positionnement absolu sans valeurs explicites, les éléments resteront dans leur position statique. Ce comportement peut sembler inattendu mais est documenté dans les spécifications CSS. Comprendre ces valeurs par défaut permet d'éviter les problèmes de désalignement et favorise un positionnement précis dans les mises en page Web complexes.

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!