web-dev-qa-db-fra.com

Puis-je positionner un élément fixe par rapport au parent?

Je trouve que lorsque je positionne un élément fixe, que le parent soit positionné ou non, il se positionnera 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/ibesa

cssdom
220
Jiew Meng

Permettez-moi de répondre aux deux questions possibles. Notez que votre titre existant (et le message d'origine) posent une question différente de celle que vous recherchez dans votre commentaire et votre modification.

Pour positionner un élément "fixe" par rapport à un élément parent, vous voulez que 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 childDiv element 50 pixels plus bas et 20 pixels plus bas par rapport à la position de parentDiv.

Pour positionner un élément "fixe" par rapport à la fenêtre, vous voulez position:fixed, et pouvez utiliser top:, left:, right: et bottom: pour vous positionner comme bon vous semble.

Par exemple:

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

Ceci positionnera yourDiv fixe par rapport à la fenêtre du navigateur Web, à 40 pixels du bord inférieur et à 40 pixels du bord droit.

125
DuckMaestro

La spécification CSS nécessite que position:fixed soit ancré à la fenêtre d'affichage, et non à l'élément positionné qui le contient.

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

ALTERNATIVE: certains navigateurs prennent en charge sticky CSS, ce qui limite la position d'un élément dans son conteneur et dans la fenêtre d'affichage. Par le message commit:

sticky ... contraint un élément à se positionner à l'intersection de sa boîte conteneur et de la fenêtre d'affichage.

Un élément collant se comporte comme la position: relative (un espace lui est réservé dans le flux), mais avec un décalage déterminé par la position collante. IsInFlowPositioned () a été modifié pour couvrir les éléments relatifs et collants.

Selon vos objectifs de conception, ce comportement peut être utile dans certains cas. C'est actuellement un brouillon et un soutien décent, mis à part les éléments de la table. position: sticky a toujours besoin d'un préfixe -webkit dans Safari.

Voir caniuse pour des statistiques à jour sur la prise en charge du navigateur.

194
Jon Adams

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

60
Даниил Пронин

Mise à jour 2016

Dans les navigateurs modernes, il est maintenant possible de positionner un élément fixe par rapport à son conteneur. Un élément ayant une propriété de transformation sert de fenêtre d'affichage pour tous ses éléments enfants à position fixe.

Ou comme le module de transformation CSS le dit:

Pour les éléments dont la présentation est régie par le modèle de boîte CSS, toute valeur autre que none pour la propriété de transformation fait également en sorte que l'élément établisse un bloc conteneur pour tous les descendants. Sa boîte de remplissage sera utilisée pour la mise en page de tous ses descendants en position absolue, descendants en position fixe et pièces jointes descendantes en arrière-plan.

.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>
45
Patrick McElhaney

Je sais que c'est très vieux, mais après ne pas avoir trouvé la réponse (CSS pure) que je cherchais, je suis arrivé à cette solution (partiellement résumée de medium.com ) et j'ai pensé que cela pourrait aider d'autres personnes qui cherchent à le 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 réalité un grand-parent). Utilisez position: absolute; pour positionner un élément dans un parent avec position: relative;, puis position: fixed; sur un élément à l'intérieur de l'élément positionné absolu comme suit:

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 nécessite que l'élément soit positionné par rapport à la fenêtre d'affichage, mais vous pouvez contourner l'aspect horizontal de celui-ci en utilisant cette solution.

Remarque: Cela diffère du simple fait de définir une valeur right ou left sur l'élément fixe, car cela provoquerait son déplacement horizontal lors du redimensionnement d'une fenêtre.

11
Lifehack

Voici un exemple de 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 à l’aide de jQuery. L'idée est de trouver la distance entre le côté droit de la fenêtre et le côté droit de l'élément de page et de conserver le côté droit de la barre d'outils!

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

Cette solution fonctionne pour moi! Référence à la réponse détaillée originale: https://stackoverflow.com/a/11833892/538562

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>
2
Ed Kolosovsky

Je sais que c'est un article plus ancien, mais je pense qu'un bon exemple de ce que Jiew Meng essayait de faire peut déjà être trouvé sur ce site. Consultez le menu latéral situé ici: https://stackoverflow.com/faq#questions . En le regardant sans trop entrer dans les détails, je peux dire que javascript attache une position fixe une fois que le défilement frappe en dessous de la balise d'ancrage et supprime le positionnement fixe si le défilement dépasse cette même balise d'ancrage. Espérons que cela permettra à quelqu'un de commencer dans la bonne direction.

2
illinoistim

C'est un ancien post mais je vais laisser ici ma solution javascript 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é transformer: translateY (@px) car il devrait être léger à calculer, animations haute performance

  2. J'ai seulement essayé cette fonction avec les navigateurs modernes, cela ne fonctionnera pas pour les anciens navigateurs nécessitant des fournisseurs (et IE bien sûr)

2
Sabaz

Avec plusieurs divs, j'ai réussi à obtenir un divs à y fixe et absolu. Dans mon cas, j'avais besoin d'une div à gauche et à droite, alignée sur une div centrée de 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>
1
sajtdavid