Comment faire un élément à la position fixe par rapport à son parent, et non pas la totalité de l'écran?

J'ai couru dans la situation que lorsque l'utilisateur de faire défiler vers le bas, une partie de la barre latérale obtient position fixe, mais quand je capture la position et de l'appliquer fixe css à la barre latérale de l'élément, il est résolu à l'ensemble de l'écran, et pas seulement le parent (qui est encadré)

comment puis-je configurer correctement?

  • An element with fixed position is positioned relative to the browser window.
  • Fouad: Pouvez-vous partager votre code?
InformationsquelleAutor Ahmed Fouad | 2012-07-11
  1. 12

    D'Abord Comprendre Le Positionnement:

    Correction du Positionnement OU [ position:fixed ]

    Un élément avec position fixe est positionné par rapport à la fenêtre du navigateur.

    Positionnement relatif OU [ position:relative ]

    Un parent positionné élément est positionné par rapport à sa position normale.

    Positionnement absolu OU [ position:absolute ]

    Une position absolue de l'élément est positionné par rapport au premier élément parent qui a une position autre que statique.

    Si dans votre cas, votre parent div devrait avoir position:relative et votre enfant div devrait avoir position:absolute au lieu de position:fixed

    Lien De Référence

    • Lien: w3schools.com/Css/css_positioning.asp
    • Mais position: absolute n'aide pas, parce que je veux montrer l'élément sur le haut de l'écran, mais toujours à l'intérieur de l'emballage largeur.. (1000px par exemple)
    • Fouad: Pouvez-vous partager votre code?
    InformationsquelleAutor Ahsan Khurshid
  2. 7

    À partir de la lecture de votre question, je suppose que vous avez quelque chose comme ceci:

     <div class="sidebar">
    <div class="fixed" style="position: fixed;"></div>
 </div>

    Malheureusement, comme vous le savez probablement maintenant, top, left, right ou bottom toujours par rapport à la fenêtre du navigateur sur positon: fixed éléments.

    La solution est d'emballage de votre .fixed div avec une autre div, et faire tout le positionnement que vous avez à faire sur la même enveloppe et non pas sur la .fixed div. Permettez-moi de démontrer:

    Le code HTML:

    <div class="sidebar">

    <div class="wrapper">
        <div class="fixed"></div>
    </div>

 </div>

    Le CSS:

    ​.sidebar {
    position: relative;
}

.helper {
    position: absolute;
    top: XYZ; left: ZYX; /*where XYZ and ZYX would
                           be the values you were 
                           trying before to give to .fixed*/
}

.fixed {
    position: fixed;
}

    Le voir en action dans ce violon: http://jsfiddle.net/joplomacedo/T2PL5/

    InformationsquelleAutor banzomaikaka
  3. 0

    Faire le parent position: relative puis ses enfants vont l'utiliser comme référence pour absolute de positionnement. Pour les détails, voir le Définition de "contenant le bloc" dans le CSS 2 spécifications.

    Sur fixed positionnement: comment quelque chose peut être fixe (ce qui signifie fixe à la fenêtre d'affichage), mais toujours par rapport à un autre élément, qui n'est pas fixé à la fenêtre? Ce qui semble une contradiction pour moi, ce qui est la raison pour laquelle j'ai d'abord mal compris votre question.

    • Autant que je sache, cela ne fonctionne que pour absolute, pas pour fixed.
    • vous avez raison, j'ai mal lu ce que absolute.
    InformationsquelleAutor MvG
  4. 0

    Ce plugin est exactement ce dont vous avez besoin

    InformationsquelleAutor Ahmad Alfy