J'essaie de corriger un divafin qu'il colle toujours en haut de l'écran, en utilisant:

position: fixed;
top: 0px;
right: 0px;

Cependant, le divest à l'intérieur d'un conteneur centré. Lorsque je l'utilise, position:fixedil corrige le divrelatif à la fenêtre du navigateur, comme il est contre le côté droit du navigateur. Au lieu de cela, il doit être fixe par rapport au conteneur.

Je sais que cela position:absolutepeut être utilisé pour corriger un élément par rapport à la div, mais lorsque vous faites défiler la page, l'élément disparaît et ne colle pas au sommet comme avec position:fixed.

Existe-t-il un hack ou une solution de contournement pour y parvenir?

Réponse courte: non. (C'est maintenant possible avec la transformation CSS. Voir l'édition ci-dessous)

Réponse longue: Le problème avec l'utilisation du positionnement "fixe" est qu'il retire l'élément du flux . il ne peut donc pas être repositionné par rapport à son parent car c'est comme s'il n'en avait pas. Si, cependant, le conteneur est d'une largeur connue et fixe, vous pouvez utiliser quelque chose comme:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Modifier (03/2015):

Ce sont des informations obsolètes. Il est désormais possible de centrer le contenu d'une taille dynamique (horizontalement et verticalement) à l'aide de la magie de la transformation CSS3. Le même principe s'applique, mais au lieu d'utiliser la marge pour compenser votre conteneur, vous pouvez utiliser translateX(-50%). Cela ne fonctionne pas avec l'astuce de marge ci-dessus, car vous ne savez pas combien le compenser, sauf si la largeur est fixe et vous ne pouvez pas utiliser de valeurs relatives (comme 50%), car elles seront relatives au parent et non à l'élément qu'il est. appliqué à. transformse comporte différemment. Ses valeurs sont relatives à l'élément auquel elles sont appliquées. Ainsi, 50%pour transformsignifie la moitié de la largeur de l'élément, tandis que 50%pour margin correspond à la moitié de la largeur du parent. Ceci est une solution IE9 +

En utilisant un code similaire à l'exemple ci-dessus, j'ai recréé le même scénario en utilisant une largeur et une hauteur complètement dynamiques:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Si vous voulez qu'il soit centré, vous pouvez aussi le faire:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Démos:

jsFiddle: Centré horizontalement que
jsFiddle: Centré à la fois horizontalement et verticalement
crédit d' origine va à l' utilisateur aaronk6 pour elle en me montrant dans cette réponse

En fait, cela est possible et la réponse acceptée ne concerne que la centralisation, ce qui est assez simple. De plus, vous n'avez vraiment pas besoin d'utiliser JavaScript.

Cela vous permettra de gérer n'importe quel scénario:

Configurez tout comme vous le feriez si vous voulez positionner: absolu à l'intérieur d'une position: conteneur relatif, puis créez une nouvelle div à position fixe à l'intérieur de la div avec position: absolute, mais ne définissez pas ses propriétés supérieure et gauche. Il sera ensuite fixé où vous le souhaitez, par rapport au conteneur.

Par exemple:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Malheureusement, j'espérais que ce fil pourrait résoudre mon problème avec le WebKit d'Android rendant les pixels de flou de l'ombre en tant que marges sur les éléments de position fixe, mais il semble que ce soit un bug.
Quoi qu'il en soit, j'espère que cela aide!

Oui, selon les spécifications, il existe un moyen.

Bien que je convienne que Graeme Blackwood devrait être la réponse acceptée, car elle résout pratiquement le problème, il convient de noter qu'un élément fixe peut être positionné par rapport à son conteneur.

J'ai remarqué par accident qu'en postulant

-webkit-transform: translateZ(0);

au corps, il a fait un enfant fixe par rapport à lui (au lieu de la fenêtre). Donc, mes éléments leftet toppropriétés fixes étaient désormais relatifs au conteneur.

J'ai donc fait quelques recherches, et j'ai constaté que le problème était déjà couvert par Eric Meyer et même si cela ressemblait à un "truc", il s'avère que cela fait partie des spécifications:

Pour les éléments dont la disposition est régie par le modèle de boîte CSS, toute valeur autre que aucune pour la transformation entraîne la création à la fois d'un contexte d'empilement et d'un bloc conteneur. L'objet agit comme un bloc conteneur pour les descendants positionnés fixes.

http://www.w3.org/TR/css3-transforms/

Ainsi, si vous appliquez une transformation à un élément parent, il deviendra le bloc conteneur.

Mais...

Le problème est que l'implémentation semble boguée / créative, car les éléments cessent également de se comporter comme fixes (même si ce bit ne semble pas faire partie de la spécification).

Le même comportement se retrouvera dans Safari, Chrome et Firefox, mais pas dans IE11 (où l'élément fixe restera toujours fixe).

Une autre chose intéressante (non documentée) est que lorsqu'un élément fixe est contenu à l'intérieur d'un élément transformé, alors que ses propriétés topet leftseront désormais liées au conteneur, en respectant la box-sizingpropriété, son contexte de défilement s'étendra sur la bordure de l'élément, comme si une boîte -sizing a été défini sur border-box. Pour certains créatifs, cela pourrait devenir un jouet :)

TESTER

La réponse est oui, tant que vous ne définissez pas left: 0ou right: 0après avoir défini la position div sur fixe.

http://jsfiddle.net/T2PL5/85/

Vérifiez la div de la barre latérale. Il est fixe, mais lié au parent, pas au point de vue de la fenêtre.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

position: stickyc'est une nouvelle façon de positionner des éléments qui est conceptuellement similaire à position: fixed. La différence est qu'un élément avec position: stickyse comporte comme position: relativedans son parent, jusqu'à ce qu'un seuil de décalage donné soit atteint dans la fenêtre.

Dans Chrome 56 (actuellement bêta en décembre 2016, stable en janvier 2017), la position: le sticky est de retour.

https://developers.google.com/web/updates/2016/12/position-sticky

Plus de détails sont dans Stick your atterrissages! position: terres collantes dans WebKit .

SOLUTION 2019: vous pouvez utiliser la position: stickypropriété.

Voici un exemple CODEPEN démontrant l'utilisation et en quoi elle diffère position: fixed.

Son comportement est expliqué ci-dessous:

1. Un élément avec une position collante est positionné en fonction de la position de défilement de l'utilisateur. Il agit essentiellement comme position: relativejusqu'à ce qu'un élément défile au-delà d'un décalage spécifique, auquel cas il se transforme en position: fixe. Quand il est défilé, il revient à sa position précédente (relative).

2. Il affecte le flux d'autres éléments de la page, c'est-à-dire qu'il occupe un espace spécifique sur la page (tout comme position: relative).

3. S'il est défini à l'intérieur d'un conteneur, il est positionné par rapport à ce conteneur. Si le conteneur a un débordement (scroll), en fonction du décalage de scroll, il se transforme en position: fixe.

Donc, si vous souhaitez obtenir la fonctionnalité fixe mais à l'intérieur d'un conteneur, utilisez le sticky.

Il suffit de retirer les styles haut et gauche de la position fixe div. Voici un exemple

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

Le div #content sera assis là où se trouve le div parent, mais y sera fixé.

J'ai créé ce plugin jQuery pour résoudre un problème similaire que je rencontrais lorsque j'avais un conteneur centré (données tabulaires), et je voulais que l'en-tête soit fixé en haut de la page lorsque la liste était défilée, mais je voulais qu'il soit ancré à les données tabulaires pour qu'elles se trouvent partout où je place le conteneur (centré, gauche, droite) et lui permettent également de se déplacer vers la gauche et la droite avec la page lors d'un défilement horizontal.

Voici le lien vers ce plugin jQuery qui peut résoudre ce problème:

https://github.com/bigspotteddog/ScrollToFixed

La description de ce plugin est la suivante:

Ce plugin est utilisé pour fixer des éléments en haut de la page, si l'élément aurait défilé hors de vue, verticalement; cependant, cela permet à l'élément de continuer à se déplacer vers la gauche ou la droite avec le défilement horizontal.

Étant donné une option marginTop, l'élément cessera de se déplacer verticalement vers le haut une fois que le défilement vertical aura atteint la position cible; mais l'élément se déplacera toujours horizontalement lorsque la page défile vers la gauche ou la droite. Une fois que la page a été défilée vers le bas en passant la position cible, l'élément sera restauré à sa position d'origine sur la page.

Ce plugin a été testé dans Firefox 3/4, Google Chrome 10/11, Safari 5 et Internet Explorer 8/9.

Utilisation pour votre cas particulier:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

J'ai dû le faire avec une publicité que mon client voulait placer en dehors de la zone de contenu. J'ai simplement fait ce qui suit et cela a fonctionné comme un charme!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

Deux éléments HTML et CSS pur (navigateurs modernes)

Voir cet exemple jsFiddle.Redimensionnez et voyez comment les éléments fixes se déplacent même avec les éléments flottants dans lesquels ils se trouvent. Utilisez la barre de défilement la plus à l'intérieur pour voir comment le défilement fonctionnerait sur un site (les éléments fixes restant fixes).

Comme beaucoup ici ont dit, une clé ne fixe pas de tous les paramètres de position sur l' fixedélément (pas top, right, bottomou leftvaleurs).

Au lieu de cela, nous plaçons tous les éléments fixes (notez comment la dernière boîte en a quatre) en premier dans la boîte dont ils doivent être positionnés, comme ceci:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Ensuite, nous les utilisons margin-topet margin-leftles "déplaçons" par rapport à leur conteneur, quelque chose comme ce CSS:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Notez que parce que les fixedéléments ignorent tous les autres éléments de mise en page, le conteneur final de notre violon peut avoir plusieurs fixedéléments et avoir toujours tous ces éléments liés au coin supérieur gauche. Mais cela n'est vrai que s'ils sont tous placés en premier dans le conteneur, car ce violon de comparaison montre que s'il est dispersé dans le contenu du conteneur, le positionnement devient peu fiable .

Que le wrapper soit statique , relatif ou absolu dans le positionnement, cela n'a pas d'importance.

Vous pouvez essayer mon plugin jQuery, FixTo .

Usage:

$('#mydiv').fixTo('#centeredContainer');

Une autre solution étrange pour atteindre une position fixe relative consiste à convertir votre conteneur en un iframe, de cette façon, votre élément fixe peut être fixé à la fenêtre du conteneur et non à la page entière.

Avec du CSS pur, vous ne pouvez pas y arriver; du moins je ne l'ai pas fait. Cependant, vous pouvez le faire avec jQuery très simplement. Je vais expliquer mon problème, et avec un peu de changement, vous pouvez l'utiliser.

Donc, pour commencer, je voulais que mon élément ait un sommet fixe (du haut de la fenêtre) et un composant gauche à hériter de l'élément parent (car l'élément parent est centré). Pour définir le composant gauche, placez simplement votre élément dans le parent et définissezposition:relative pour l'élément parent.

Ensuite, vous devez savoir combien votre élément est en haut lorsque la barre de défilement est en haut (y zéro défilé); il y a encore deux options. Tout d'abord, c'est statique (un certain nombre) ou vous devez le lire à partir de l'élément parent.

Dans mon cas, c'est à 150 pixels du sommet statique. Donc, quand vous voyez 150, c'est combien l'élément est en haut quand nous n'avons pas fait défiler.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

C'est facile (selon HTML ci-dessous)

L'astuce consiste à ne PAS utiliser le haut ou la gauche sur l'élément (div) avec "position: fixed;". Si ceux-ci ne sont pas spécifiés, l'élément "contenu fixe" apparaîtra RELATIF à l'élément englobant (le div avec "position: relative;") AU LIEU DE par rapport à la fenêtre du navigateur !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Ci-dessus m'a permis de localiser un bouton de fermeture "X" en haut de beaucoup de texte dans un div avec défilement vertical. Le "X" se place en place (ne se déplace pas avec le texte défilé et pourtant il se déplace vers la gauche ou la droite avec le conteneur div englobant lorsque l'utilisateur redimensionne la largeur de la fenêtre du navigateur! Ainsi, il est "fixe" verticalement, mais positionné par rapport à l'élément enveloppant horizontalement!

Avant que cela ne fonctionne, le "X" a défilé vers le haut et hors de vue lorsque j'ai fait défiler le contenu du texte vers le bas.

Toutes mes excuses pour ne pas avoir fourni ma fonction javascript hideDiv (), mais cela rendrait ce message inutilement plus long. J'ai choisi de le garder aussi court que possible.

J'ai créé un jsfiddle pour montrer comment cela fonctionne en utilisant la transformation.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

J'ai le même problème, l'un des membres de notre équipe me donne une solution. Pour autoriser la position de fix div et par rapport aux autres div, notre solution est d'utiliser un conteneur père enveloppant le div fixe et le div de défilement.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

css

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

Oui, c'est possible tant que vous ne définissez pas la position ( topou left, etc.) de votre fixedélément (vous pouvez toujours utiliser marginpour définir une position relative, cependant). Simon Bos a publié un article à ce sujet il y a quelque temps .

Cependant, ne vous attendez pas à ce que l'élément fixe défile avec des parents non fixes.

Voir une démo ici .

J'ai fait quelque chose comme ça il y a quelque temps. J'étais assez nouveau sur JavaScript, donc je suis sûr que vous pouvez faire mieux, mais voici un point de départ:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Vous devrez définir votre largeur, puis il obtient la largeur de la fenêtre et modifie la marge toutes les quelques secondes. Je sais que c'est lourd, mais ça marche.

C'est possible si vous utilisez JavaScript. Dans ce cas, le plugin jQuery Sticky-Kit :

Mon projet est le modèle .NET ASP Core 2 MVC Angular 4 avec Bootstrap 4. L'ajout de "sticky-top" dans le composant principal de l'application html (c'est-à-dire app.component.html) sur la première ligne a fonctionné, comme suit:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

Est-ce la convention ou ai-je trop simplifié cela?

Lorsque vous utilisez la position:fixedrègle CSS et essayez d'appliquer top/ left/ right/ bottomil positionne l'élément par rapport à la fenêtre.

Une solution de contournement consiste à utiliser des marginpropriétés au lieu de top/ left/ right/bottom

Vérifiez ça:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>