Je constate que lorsque je positionne un élément de manière fixe, peu importe que le parent soit positionné de manière relative ou non, il se positionne de manière fixe, par rapport à la fenêtre ?
CSS
#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }
HTML
<div id="wrapper">
...
<a id="feedback" href="#">Feedback</a>
</div>
La spécification CSS exige que l'élément position:fixed
soit ancré dans la fenêtre d'affichage, et non dans l'élément positionné qu'il contient.
Si vous devez spécifier vos coordonnées par rapport à un parent, vous devrez utiliser JavaScript pour trouver la position du parent par rapport à la fenêtre d'affichage, puis définir la position de l'élément enfant (fixe) en conséquence.
AUTRE SOLUTION : Certains navigateurs ont un support CSS sticky
qui limite un élément à être positionné à la fois dans son conteneur et dans la fenêtre d'affichage. Selon le message de validation :
sticky
... contraint un élément à être positionné à l'intérieur de l'intersection de son conteneur et de la fenêtre d'affichage.Un élément positionné de manière collante se comporte comme position:relative (l'espace est réservé pour lui dans le flux), mais avec un décalage qui est déterminé par l'attribut position collante. Modification de isInFlowPositioned() pour couvrir les positions relative et collante. sticky.
En fonction de vos objectifs de conception, ce comportement peut être utile dans certains cas. C'est actuellement une ébauche de travail, et a un support décent, à part les éléments de table. position : sticky
a toujours besoin d'un préfixe -webkit
dans Safari.
Voir caniuse pour des statistiques à jour sur le support des navigateurs.
Permettez-moi d'apporter des réponses aux deux questions possibles. Notez que votre titre existant (et le message original) pose une question différente de celle que vous cherchez dans votre modification et votre commentaire ultérieur.
Pour positionner un élément "fixe" ; par rapport à un élément parent, vous voulez position:absolute
sur l'élément enfant, et tout mode de position autre que le mode par défaut ou statique sur votre élément parent.
Par exemple :
#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }
Ceci positionnera l'élément childDiv
50 pixels à gauche et 20 pixels vers le bas par rapport à la position de parentDiv's.
**Pour positionner un élément de manière fixe par rapport à la fenêtre, il faut utiliser position:fixed
, puis utiliser top:
, left:
, right:
et bottom:
pour le positionner comme bon vous semble.
Par exemple :
#yourDiv { position:fixed; bottom:40px; right:40px; }
Cela positionnera votreDiv
de manière fixe par rapport à la fenêtre du navigateur web, à 40 pixels du bord inférieur et à 40 pixels du bord droit.
Voici un exemple de la suggestion de Jon Adams ci-dessus afin de fixer un div (barre d'outils) sur le côté droit de votre élément de page en utilisant jQuery. L'idée est de trouver la distance entre le côté droit de la fenêtre d'affichage et le côté droit de l'élément de la page et d'y maintenir le côté droit de la barre d'outils !
<div id="pageElement"></div>
<div id="toolbar"></div>
#toolbar {
position: fixed;
}
....
function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
$(toolbar).css("right", $(window).scrollLeft() + $(window).width()
- $(pageElement).offset().left
- parseInt($(pageElement).css("borderLeftWidth"),10)
- $(pageElement).width() + "px");
}
$(document).ready(function() {
$(window).resize(function() {
placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
});
$(window).scroll(function () {
placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
});
$("#toolbar").resize();
});