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

596 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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

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