Qu'arrive-t-il aux éléments positionnés de manière absolue sans valeurs explicites en haut, à gauche, en bas ou à droite ?

Comprendre les valeurs de position par défaut pour le positionnement absolu

En CSS, lorsqu'un élément est positionné de manière absolue, ses coordonnées sont spécifiées par rapport à son bloc conteneur . Cependant, que se passe-t-il lorsqu'aucune valeur explicite n'est fournie pour les propriétés top, left, bottom ou right ? Pour percer ce mystère, examinons les valeurs par défaut et leurs implications.

Comme prévu, la valeur par défaut de toutes ces propriétés n'est pas zéro, mais plutôt "auto". Selon la spécification CSS (Section 9.3.2), lorsque tous les décalages sont définis sur auto pour une boîte positionnée de manière absolue, elle reste dans sa position d'origine comme si elle n'était pas positionnée du tout.

Ce concept devient plus clair dans la section 10.3.7 de la spécification, qui stipule que lorsque les trois gauche, largeur et droite sont automatiques, la propriété left est résolue en premier. Si la directionnalité de l'élément est de gauche à droite (« ltr »), left est défini sur la position statique ; sinon, right est défini sur la position statique

De même, la section 10.6.4 régit les contraintes de dimension verticale pour les éléments en position absolue. Si top, height et bottom sont tous automatiques, la propriété top se voit attribuer la position statique par défaut.

En termes pratiques, cela signifie qu'un élément positionné de manière absolue sans aucune valeur de coordonnée explicite restera là où il aurait dû normalement positionné, sans aucun déplacement de son emplacement. C'est ce qu'on appelle la "position statique".

Pour résumer, lorsqu'aucune valeur spécifique n'est spécifiée pour les propriétés haut, gauche, bas ou droite d'un élément en position absolue, elles prennent la valeur par défaut auto, qui conserve efficacement la position d'origine de l'élément dans son conteneur.

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!