Pouvez-vous utiliser « position : absolue » sans définir « top », « left », « bottom » ou « right » ?

Position : Absolue sans réglage Haut/Gauche/Bas/Droite ?

En CSS, la propriété position : absolue vous permet de supprimer un élément du flux normal du document , le rendant positionné de manière absolue par rapport à son conteneur. Cependant, vous souhaiterez parfois utiliser position : absolue sans définir de valeurs explicites pour les propriétés top, left, bottom ou right.

Cas n° 1 :

Un scénario dans lequel cette approche peut être utile lorsque vous souhaitez positionner un élément par rapport à un autre élément dans le même conteneur. Par exemple, vous souhaiterez peut-être placer un logo au-dessus d'une photo dans un en-tête, comme le démontre l'exemple HTML et CSS ci-dessous :

<a>

#logo {
  position: absolute;
  margin: 10px;
  /* or padding: 10px; */
  /* or border: 10px solid transparent; */
}

Dans cet exemple, définissez position : absolue sans spécifier de La valeur supérieure positionne le logo 10 px au-dessus de la photo, en utilisant la marge supérieure de la photo comme point de référence.

Cas n° 2 :

Un autre cas où cette technique peut être utile est lorsque vous travaillez avec un tableau. mises en page basées. Par exemple, vous souhaiterez peut-être créer un menu horizontal à plusieurs niveaux qui s'étend sur toute la largeur du conteneur. Étant donné que les cellules du tableau ne prennent pas en charge position : relative, vous pouvez utiliser position : absolue sans les valeurs haut/gauche/bas/droite, comme indiqué ci-dessous :

<table>

#menu td {
  position: absolute;
  height: 100%;
  width: 100%;
}

Dans ce scénario, la propriété position : absolue sans aucune valeur supplémentaire, positionne chaque cellule du tableau par rapport aux limites du tableau, vous permettant de créer un menu absolu à plusieurs niveaux qui s'aligne parfaitement.

Selon les normes CSS :

En général, le Les spécifications CSS indiquent que si les propriétés top/bottom ou left/right sont définies sur auto, elles doivent par défaut prendre la position de l'élément : valeurs statiques. Cependant, il est important de noter que les implémentations des navigateurs peuvent varier dans leur prise en charge du positionnement absolu sans définir explicitement les valeurs haut/gauche/bas/droite.

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!