Puis-je placer un élément fixe par rapport aux parents?

Question

Je trouve que lorsque je poste un élément fixe, il n'a pas d'importance si le parent est positionné par rapport ou pas, il sera en position 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>

http://jsbin.com/ibesa3

Answer 1

Depuis que je suis bombardé de downvotes-- permettez-moi de fournir à la fois des réponses aux deux questions. Notez que votre titre actuel (et post original) poser une question différente de ce que vous cherchez dans votre édition et commentaire ultérieur.

---

Pour positionner un élément "fixe" par rapport à un élément parent, vous souhaitez position:absolute sur l'élément enfant, et toute position mode autre que la valeur par défaut ou statique sur votre élément parent.

Par exemple:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

Ce sera à la position childDiv élément 50 pixels à gauche et à 20 pixels vers le bas par rapport à parentDiv de position.

---

Pour positionner un élément "fixe" par rapport à la fenêtre, vous souhaitez position:fixed, et peut utiliser top:, left:, right:, et bottom: à la position que vous voyez l'ajustement.

Par exemple:

#yourDiv { position:fixed; bottom:40px; right:40px; }

Ce sera à la position yourDiv fixe par rapport à la fenêtre du navigateur web, à 40 pixels du bord inférieur et à 40 pixels du bord droit.

Answer 2

La spécification CSS exige position:fixed être ancré dans la fenêtre d'affichage, pas le contenant positionné sur l'élément.

Si vous devez spécifier vos coordonnées par rapport à un parent, vous devez utiliser JavaScript pour trouver la position du parent par rapport à la première fenêtre d'affichage, puis la valeur de l'enfant (fixe) de l'élément de position en conséquence.

DÉCOURAGÉ ALTERNATIVE: WebKit (Chrome, Safari, iOS navigateurs, et quelques autres) ont -webkit-sticky ce qui limite un élément à être positionné au sein de son conteneur et la fenêtre d'affichage. Par le message de commit:

-webkit-sticky ... limite un élément à être positionné à l'intérieur de l'intersection de ses conteneur de la boîte, et la fenêtre d'affichage.

Un stickily positionné élément se comporte comme position:relative (l'espace est réservée-flow), mais avec un décalage qui est déterminée par le collant position. Changé isInFlowPositioned() pour couvrir relative et collante.

En fonction de vos objectifs de conception, ce comportement peut être utile dans certains cas. Mais c'est expérimental, et pas à proximité d'une norme encore. Et comme il exige expérimentale drapeaux en Chrome de toute façon, -webkit-sticky n'est pas vraiment une solution pour l'instant.

Answer 3

tout d'abord, définissez position: fixed et left: 50%, et la seconde - maintenant, votre départ est une centre et vous pouvez définir la nouvelle position de la marge.

Answer 4

Voici un exemple de Jon Adams suggestion ci-dessus afin de fixer un div (barre d'outils) pour le côté droit de votre élément de la page à l'aide de jQuery. L'idée est de trouver la distance entre le côté droit de la fenêtre à droite de l'élément de la page, et garder le côté droit de la barre d'outils là-bas!

HTML

<div id="pageElement"></div>
<div id="toolbar"></div>

CSS

#toolbar {
    position: fixed;
}
....

jQuery

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

Answer 5

Je sais que c'est un vieux post, mais je pense qu'un bon exemple de ce que Jiew Meng était en train de faire peut-être déjà trouvé sur ce site. Découvrez le menu latéral situé ici: http://stackoverflow.com/faq#questions. Le regardant sans entrer dans trop profond, je peux dire javascript attache une position fixe une fois le défilement des coups en dessous de la balise d'ancrage et supprime la correction du positionnement si le défilement passe au-dessus de cette même balise d'ancrage. Espérons-le, qui vous permettra d'obtenir quelqu'un a commencé dans la bonne direction.