CSS position:fixed à l'intérieur d'un élément positionné

Question

J'ai un div positionné dont le contenu peut être trop long, ce qui fait apparaître des barres de défilement ( overflow:auto ensemble). Il fonctionne comme une boîte de dialogue dans une application ajax. Je veux fixer un bouton de fermeture dans le coin supérieur droit pour que, lorsque l'utilisateur fait défiler la division, elle ne disparaisse pas.

J'ai essayé avec position:fixed; right:0; top:0 mais il a placé le bouton en haut à droite de la page et non dans le div (dans firefox).

Est-il possible de placer ce bouton en utilisant uniquement les CSS sans avoir à manipuler les offsetWidth/Height en js à chaque événement de défilement ?

ps : la hauteur et la largeur du div n'est pas une valeur fixe, elle dépend de la taille du contenu et de la taille de la fenêtre du navigateur. L'utilisateur peut également la redimensionner s'il le souhaite.

Answer 1

Vous pouvez utiliser le position:fixed; mais sans ensemble left y top . Ensuite, vous le pousserez vers la droite en utilisant margin-left pour le placer dans la position que vous souhaitez.

Regardez une démo ici : http://jsbin.com/icili5

Answer 2

Position:fixed donne une position absolue par rapport à la fenêtre du BROWSER. Il va donc bien sûr s'y placer.

Alors que position:absolute se réfère à l'élément parent, donc si vous placez votre <div> à l'intérieur de l'élément < div> du conteneur, il devrait se positionner là où vous l'aviez prévu. Quelque chose comme

EDIT : grâce à @Sotiris, qui a raison, la solution peut être obtenue en utilisant une position:fixed et une margin-left. Comme ceci : http://jsfiddle.net/NeK4k/

Answer 3

Il semble que les transformations css peuvent être utilisées

"La propriété 'transform' établit un nouveau système de coordonnées locales à l'élément",

mais ... ce n'est pas cross-browser, il semble que seul Opera fonctionne correctement.

Answer 4

Si votre bouton de fermeture doit être du texte, cela fonctionne très bien pour moi :

#close {
  position: fixed;
  width: 70%; /* the width of the parent */
  text-align: right;
}
#close span {
  cursor: pointer;
}

Alors votre HTML peut juste être :

<div id="close"><span id="x">X</span></div>

Answer 5

Dans votre div parent, définissez position: relative; et utiliser position: absolute; pour l'élément que vous souhaitez positionner par rapport au parent. Cela vous permettra de positionner correctement votre bouton dans les limites de la division parent plutôt que dans celles de la page.

position: absolute est en fait positionné par rapport aux limites du premier parent avec position définie à une valeur autre que static pour que vous puissiez avoir absolute articles à l'intérieur d'autres absolute , relative o fixed articles.