Comment positionner un élément fixe verticalement et absolu horizontalement lors du défilement ?

Position de l'élément fixe verticalement, absolu horizontalement

L'utilisateur cherchait une solution pour un bouton qui restait à une distance définie du bord droit d'un div, quelle que soit la taille de la fenêtre d'affichage. , tout en faisant défiler la fenêtre. Ceci peut être réalisé en utilisant la stratégie suivante :

Structure HTML

<div class="inflow">
  <div class="positioner"> <!-- May not be needed -->
    <div class="fixed"></div>
  </div>
</div>

Style CSS

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}

div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

Points clés

• Position verticale fixe : La position : fixe sur div.fixed garantit qu'il défile avec le fenêtre.
• Position horizontale absolue : La position horizontale fixe n'est pas définie directement. Au lieu de cela, il s'appuie sur les divs wrapper (div.inflow et éventuellement div.positioner) pour définir sa position par rapport au div parent.
• Ajustement dynamique : À mesure que la taille du div du conteneur change, le bouton maintient la distance souhaitée par rapport au bord droit.
• Gestion du débordement :Le fixe L'élément position est exempté du contexte de débordement de son div conteneur, même avec la propriété overflow: Hidden définie.

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!