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 le 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 conservé quelle que soit la taille de la fenêtre d'affichage.

Exemple de code :

Le code suivant illustre l'implémentation :

HTML :

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;
}

Considérations clés :

• 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.
• Dépassement de paramètre : caché sur le div du conteneur n'affecte pas le positionnement de l'élément fixe en dehors de son frontières.