Comment puis-je positionner absolument un élément horizontalement et le fixer verticalement ?

Positionner l'élément absolument horizontalement et fixe verticalement

Le but est de créer un bouton qui maintient une distance fixe par rapport au bord droit d'un autre élément quelle que soit la taille de la fenêtre, tout en faisant défiler verticalement avec le window.

Solution

Pour y parvenir, nous pouvons utiliser une combinaison de propriétés de positionnement CSS :

<div class="container">
  <div class="button"></div>
</div>

CSS :

.container {
  position: relative;
}

.button {
  position: absolute;
  right: 10px;  /* Distance from the right edge of the container */
  top: 100px;   /* Distance from the top of the viewport */
}

En définissant la position de .button sur absolue, nous le rendons indépendant du flux normal de documents. La propriété right spécifie la distance horizontale depuis le bord droit du conteneur, tandis que top définit la distance verticale depuis le haut de la fenêtre.

Remarque : Cette solution crée un élément fixe qui est positionné horizontalement par rapport à son conteneur, répondant à la condition de "fixé verticalement, horizontal absolu" dans la question.

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!