la spécification CSS exige que position:fixed soit ancré au point de vue, et non à l'élément contenant l'élément positionné.

si vous devez spécifier vos coordonnées relatives à un parent, vous devrez utiliser JavaScript pour trouver d'abord la position du parent par rapport au viewport, puis régler la position de l'élément enfant (fixe) en conséquence.

ALTERNATIVE : certains navigateurs ont sticky CSS prise en charge qui limite un élément positionné au sein de son conteneur et la fenêtre d'affichage. Selon le message de propagation:

sticky ... limite un élément à placer à l'intérieur de l'intersection de sa boîte de containers et du viewport.

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

selon vos objectifs de conception, ce comportement peut être utile dans certains cas. Il s'agit actuellement d'un projet de travail, qui bénéficie d'un soutien décent, en dehors des éléments de table. position: sticky nécessite toujours un préfixe -webkit en Safari.

voir caniuse pour des statistiques à jour sur le support du navigateur.

d'abord , mettez position: fixed et left: 50% , et deuxièmement - maintenant votre départ est un centre et vous pouvez définir une nouvelle position avec marge.

mise à jour 2016

il est maintenant possible dans les navigateurs modernes de positionner un élément fixé par rapport à son conteneur. Un élément qui a une propriété transformante agit comme le point de vue pour n'importe lequel de ses éléments enfant de position fixe.

.context {
  width: 300px;
  height: 250px;
  margin: 100px;
  transform: translateZ(0);
}
.viewport {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: scroll;
}
.centered {
  position: fixed;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}

<div class="context">
  <div class="viewport">
    <div class="canvas">

      <table>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
      </table>

      <button class="centered">OK</button>

    </div>
  </div>
</div>

je sais que c'est super vieux mais après n'avoir pas trouvé la réponse (CSS pur) que je cherchais j'ai trouvé cette solution (partiellement abstraite de medium.com ) et a pensé que cela pourrait aider d'autres qui cherchent à faire la même chose.

si vous combinez les réponses de @DuckMaestro, vous pouvez positionner un élément fixe par rapport à un parent (en fait grand-parent). Utilisez position: absolute; pour positionner un élément à l'intérieur d'un parent avec position: relative; et puis position: fixed; sur un élément à l'intérieur de l'absolu élément positionné de la sorte:

HTML

<div class="relative">
  <div class="absolute">
    <a class="fixed-feedback">This element will be fixed</a>
  </div>
</div>

CSS

.relative {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.fixed-feedback {
  position: fixed;
  top: 120px;
  width: 50px;
}

exemple

comme @JonAdams l'a dit, la définition de position: fixed exige que l'élément soit positionné par rapport au viewport mais vous pouvez contourner l'aspect horizontal de cela en utilisant cette solution.

Note: différent que de simplement définir une valeur right ou left sur l'élément fixe parce que cela le ferait se déplacer horizontalement quand une fenêtre est redimensionnée.

voici un exemple de la suggestion de Jon Adams ci-dessus afin de fixer une 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 à 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();
});

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. Consultez le menu latéral situé ici: https://stackoverflow.com/faq#questions . En le regardant sans entrer trop en profondeur, je peux dire que javascript attache une position fixe une fois que le défilement atteint sous la balise d'ancrage et enlève la position fixe si le défilement va 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.

c'est un vieux post mais je vais laisser ici ma solution javascript juste au cas où quelqu'un en aurait besoin.

// you only need this function
function sticky( _el ){
  _el.parentElement.addEventListener("scroll", function(){
    _el.style.transform = "translateY("+this.scrollTop+"px)";
  });
}


// how to make it work:
// get the element you want to be sticky
var el = document.querySelector("#blbl > div");
// give the element as argument, done.
sticky(el);

#blbl{
  position:relative;
  height:200px;  
  overflow: auto;
  background: #eee;
}

#blbl > div{
  position:absolute; 
  padding:50px; 
  top:10px; 
  left:10px; 
  background: #f00
}

<div id="blbl" >
    <div><!-- sticky div --></div> 

    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Notes

1. j'ai utilisé transform: translateY(@px) parce qu'il doit être léger à calculer, haute performance-animations

2. j'ai seulement essayé cette fonction avec les navigateurs modernes, il ne fonctionnera pas pour les vieux navigateurs où les vendeurs sont nécessaires (et IE, bien sûr)

avec plusieurs divs j'ai réussi à obtenir un fixed-y et absolute-x divs. Dans mon cas, j'avais besoin d'un div sur les côtés gauche et droite, aligné sur un div centré de largeur 1180px.

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>

ça marche bien! Référence à la réponse détaillée originale: https://stackoverflow.com/a/11833892/5385623

css:

.level1 {
    position: relative;
}


.level2 {
    position: absolute;
}


.level3 {
    position: fixed;
    /* Do not set top / left! */
}

html:

<div class='level1'>
    <div class='level2'>
        <div class='level3'>
            Content
        </div>
    </div>
</div>