Comment positionner un élément fixe par rapport à son parent ou à la fenêtre du navigateur ?

Positionnement des éléments : fixe par rapport au parent ou à la fenêtre

Votre question se concentre sur le positionnement d'un élément "fixe" par rapport à son parent à l'aide de CSS. Lorsqu'un élément est positionné de manière fixe, sa position est déterminée par rapport à la fenêtre, et non à son élément parent.

Positionnement d'un élément fixe par rapport au parent

Si vous souhaitez positionner un élément fixe par rapport à son parent, vous pouvez utiliser les propriétés CSS suivantes :

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
}

Cela positionnera l'élément #child 50 pixels vers le bas et 50 pixels à droite de son parent, #parent.

Positionnement d'un élément fixe par rapport à la fenêtre

Pour positionner un élément fixe par rapport à la fenêtre, vous pouvez utiliser les propriétés CSS suivantes :

#element {
  position: fixed;
  top: 50px;
  right: 50px;
}

Cela positionnera l'élément #element à 50 pixels vers le bas du haut et à 50 pixels du bord droit de la fenêtre du navigateur.

Exemple

Considérons l'exemple suivant :

<div>

#parent {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#child {
  position: absolute;
  right: 0;
  top: 120px;
}

Dans cet exemple, l'élément #child est positionné fixe par rapport à son parent, #parent. Il se déplacera avec l'élément parent lorsqu'il défile verticalement, mais il restera 0 pixel à droite et 120 pixels en dessous du haut du parent.

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!