web-dev-qa-db-fra.com

Aligner le div avec la position fixe du côté droit

Je veux montrer une div qui est toujours visible même lorsque l'utilisateur fait défiler la page. J'ai utilisé le CSS position: fixed; pour cela.

Maintenant, je souhaite également afficher la variable div dans le coin droit du parent div.

J'ai essayé d'utiliser ce code CSS pour atteindre l'objectif:

.test {
  position: fixed;
  text-align: right;
}

Mais cela n’aligne pas l’élément du côté droit.

Mon exemple de page peut être trouvé ici , l'élément div que je veux aligner s'appelle test dans la classe parente parent.

Existe-t-il une solution CSS ou JavaScript pour aligner l'élément de position fixe sur le côté droit de l'écran?

javascriptcss
21
Pradyut Bhattacharya

Avec position fixed, vous devez fournir des valeurs pour définir l'emplacement où la div sera placée, car il s'agit d'une position fixe.

Quelque chose comme....

.test
{
   position:fixed;
   left:100px;
   top:150px;
}

Fixed - Génère un élément positionné de manière absolue, positionné par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée avec les propriétés "left", "top", "right" et "bottom"

Plus sur la position ici .

15
Gabe

Vous pouvez utiliser deux div imbricated. Mais vous avez besoin d'une largeur fixe pour votre contenu, c'est la seule limitation.

<div style='float:right; width: 180px;'>
 <div style='position: fixed'>
   <!-- Your content -->
 </div>
</div>
35
246tNt

Utilisez l'attribut 'right' à côté du style de position fixe. La valeur fournie agit comme un décalage par rapport à la droite de la limite de la fenêtre.

Exemple de code:

.test {
  position: fixed;
  right: 0;
}

Si vous avez besoin d'un remplissage, vous pouvez définir la propriété right avec une certaine valeur, par exemple: right: 10px.

Remarque: La propriété float ne fonctionne pas pour les positions fixed et absolute

20
Santosh

Essayer de faire la même chose. Si vous souhaitez l'aligner sur le côté droit, définissez la valeur right sur 0. Au cas où vous auriez besoin d'un remplissage de droite, définissez la valeur sur la taille du remplissage nécessaire.

Exemple:

.test {
  position: fixed;
  right: 20px; /* Padding from the right side */
}
6
Chris

faire une div en parent, dans css le faire flotter: right puis fixer la position de la div de l'enfant

1
Pizzarius

Vous pouvez simplement faire ceci:

.test {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  right: 0;
}
0
Mazhar Haque