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

Comment positionner un élément fixe verticalement et absolu horizontalement

Dans le développement web, il est souvent nécessaire de positionner les éléments de manière qui reste cohérent quelle que soit la taille de la fenêtre. Un de ces scénarios consiste à fixer un élément verticalement, tout en maintenant une distance horizontale spécifique par rapport à un autre élément.

Considérez le défi suivant : vous avez besoin d'un bouton pour maintenir une distance constante par rapport au côté droit d'un div conteneur. Le bouton doit rester dans une position verticale fixe dans la fenêtre, quelle que soit la taille de la fenêtre.

Obtenir le positionnement souhaité

Cela est possible en utilisant la combinaison de position : fixe et de position : absolue, comme démontré dans ce qui suit code :

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

.container {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
.button {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

La clé de cette approche réside dans le fait de ne pas définir explicitement les propriétés gauche/droite pour l'élément .button. Au lieu de cela, le div conteneur et un div supplémentaire (.positioner) sont utilisés pour établir le positionnement horizontal.

L'élément .button hérite de sa position horizontale du div .container, tandis que le div .positioner appuie sur le .button vers le côté droit du conteneur div. Dans cet exemple, l'élément .button maintient une distance de 15px du bord droit du div du conteneur.

De plus, la position verticale fixe de l'élément .button (en haut : 60px) garantit qu'il reste à cet emplacement vertical. dans la fenêtre d'affichage au fur et à mesure que la page défile.

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!