Comment obtenir un positionnement vertical et horizontal relatif fixe d'un élément ?-tutoriel CSS-php.cn

Comment obtenir un positionnement vertical et horizontal relatif fixe d'un élément ?

Susan Sarandon

Libérer： 2024-12-16 20:38:10

original

456 Les gens l'ont consulté

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

Comment positionner un élément fixe verticalement mais relatif horizontalement

Dans ce scénario, nous avons besoin d'un bouton positionné à une distance fixe du côté droit d'un conteneur, quel que soit taille de la fenêtre. Il doit également défiler avec la fenêtre, en conservant un décalage vertical et horizontal cohérent. Pour y parvenir :

Définissez un div conteneur (div.inflow) avec une largeur, une hauteur et une marge droite fixes.
Facultativement, ajoutez un div wrapper (div.positioner) pour positionner l'élément fixe horizontalement dans le conteneur.
Créez l'élément fixe (div.fixed) avec une largeur, une hauteur et un sommet définis margin.
Définir la position : fixe sur l'élément fixe pour l'ancrer à la fenêtre.
S'abstenir de définir à gauche ou à droite sur l'élément fixe. Au lieu de cela, utilisez les divs conteneur et wrapper pour établir la position horizontale.

HTML:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

Copier après la connexion

CSS:

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

Copier après la connexion

Remarque : Si la largeur du conteneur n'est pas fixe, l'emballage div (div.positioner) est nécessaire pour pousser l'élément fixe vers le côté droit du conteneur.

Important : Paramètre de débordement : caché sur le conteneur n'a aucun effet sur la position fixe div étant en dehors de ses frontières. La position fixe le supprime effectivement du contexte de débordement du conteneur.

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!