Comment fixer verticalement et positionner horizontalement un élément par rapport à un div ?-tutoriel CSS-php.cn

Comment fixer verticalement et positionner horizontalement un élément par rapport à un div ?

Patricia Arquette

Libérer： 2024-12-01 12:01:11

original

476 Les gens l'ont consulté

How to Vertically Fix and Horizontally Position an Element Relative to a Div?

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

Problème :

Un utilisateur cherche à créer un bouton qui maintient une distance verticale fixe par rapport à la fenêtre tout en restant à une distance spécifique du bord droit d'un div, quelle que soit la fenêtre taille.

Solution :

Positionnement horizontal :

Bien que le positionnement « horizontal absolu » ne soit pas techniquement réalisable avec les outils fournis solution, l'objectif de maintenir une distance fixe par rapport au bord droit du div peut être atteint. En évitant de définir les propriétés gauche ou droite de l'élément fixe horizontalement, les divs du conteneur sont utilisés pour contrôler sa position horizontale.

Positionnement vertical :

L'élément est positionné fixé verticalement à l'aide de la position : propriété fixe. En définissant une valeur supérieure, le positionnement vertical est maintenu quelle que soit la taille de la fenêtre d'affichage.

Exemple de code :

Le code suivant illustre l'implémentation :

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

Clé Considérations :

Le div div.positioner peut ne pas être nécessaire si le div div.inflow a une largeur fixe, permettant un réglage direct de la marge gauche de l'élément fixe.
Paramètre de débordement : caché sur le conteneur div n'affecte pas le positionnement de l'élément fixe en dehors de ses limites.

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!