Question Position fixe mais relative au conteneur


J'essaie de réparer un div de sorte qu'il reste toujours en haut de l'écran, en utilisant:

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

Cependant, le div est à l'intérieur d'un conteneur centré. Quand j'utilise position:fixed il fixe le div par rapport à la fenêtre du navigateur, tel que c'est contre le côté droit du navigateur. Au lieu de cela, il devrait être fixé par rapport au conteneur.

je le sais position:absolute peut être utilisé pour réparer un élément par rapport à la div, mais quand 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?


508
2017-07-22 17:47


origine


Réponses:


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

Réponse longue: Le problème avec l'utilisation du positionnement "fixe" est qu'il prend l'élément écoulement. il ne peut donc pas être repositionné par rapport à son parent car c'est comme s'il n'en avait pas. Si, toutefois, le conteneur a une largeur fixe connue, 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):

C'est une information périmée. Il est maintenant 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 il faut compenser, à moins que la largeur ne soit fixe et que vous ne puissiez pas utiliser les valeurs relatives (comme 50%) car il sera relatif au parent et non à l'élément auquel il s'applique. transform se comporte différemment. Ses valeurs sont relatives à l'élément auquel elles sont appliquées. Ainsi, 50% pour transform signifie la moitié de la largeur de l'élément, tandis que 50% pour la marge est la moitié de la largeur du parent. C'est un 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 que ce soit centré, vous pouvez le faire aussi:

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

Démos

jsFiddle: Centré horizontalement seulement
jsFiddle: centré horizontalement et verticalement
Le crédit original va à l'utilisateur aaronk6 pour le signaler à moi dans cette réponse


347
2017-07-22 17:55



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

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

Réglez tout comme vous le feriez si vous voulez positionner: absolute à l'intérieur d'une position: conteneur relatif, puis créez une nouvelle position fixe div à l'intérieur de la div avec position: absolutemais fais ne pas définir ses propriétés haut et gauche. Il sera alors corrigé où vous le voulez, 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 sujet résoudrait mon problème avec Android WebKit le rendu des zones floues en tant que marges sur des éléments de position fixes, mais il semble que ce soit un bogue.
Quoi qu'il en soit, j'espère que cela aide!


152
2017-08-06 18:34



Oui, selon les spécifications, il y a un moyen.

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

J'ai remarqué par accident que lors de l'application

-webkit-transform: translateZ(0);

au corps, il en a fait un enfant fixe (au lieu de la fenêtre d'affichage). Donc mes éléments fixes left et top les propriétés étaient maintenant relatives au conteneur.

J'ai donc fait quelques recherches, et j'ai trouvé que la question avait déjà été couverte par Eric Meyer et même si cela semblait être 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 rien pour la transformation se traduit par la création à la fois un   contexte d'empilement et un bloc conteneur. L'objet agit comme un   bloc contenant pour les descendants 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 buggée / créative, car les éléments arrêtent également de se comporter comme fixes (même si ce bit ne semble pas faire partie des spécifications).

Le même comportement sera trouvé 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 dans un élément transformé, alors que son top et left les propriétés seront désormais liées au conteneur, en respectant les box-sizing propriété, son contexte de défilement s'étendra sur la bordure de l’élément, comme si la taille de la boîte était définie sur border-box. Pour un peu de créativité là-bas, cela pourrait éventuellement devenir un jouet :)

TESTER


115
2018-04-08 17:42



La réponse est oui, tant que vous ne définissez pas left: 0 ou right: 0 aprè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, et non 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>

53
2018-03-21 22:39



J'ai créé ce plugin jQuery pour résoudre un problème similaire où 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 défilait, mais je voulais qu'il soit ancré à les données tabulaires de sorte qu'il serait partout où je mets le conteneur (centré, gauche, droite) et lui permettent également de se déplacer à gauche et à droite avec la page lorsque vous faites défiler horizontalement.

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 la 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 arrêtera 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éplace toujours horizontalement au fur et à mesure que la page défile vers la gauche ou vers la droite. Une fois que la page a été redescendue, elle a passé 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();
});

18
2017-08-29 17:25



Il suffit de prendre les styles haut et gauche sur la div position fixe. 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 sera fixé là.


17
2018-03-28 14:23



Tu as position: sticky c'est une nouvelle façon de positionner les éléments et est conceptuellement similaire à position: fixed. La différence est qu'un élément avec position: sticky se comporte comme position: relative dans son parent, jusqu'à ce qu'un seuil de décalage donné soit atteint dans la fenêtre.

En Chrome 56 (actuellement beta en décembre 2016, stable en janvier 2017) position: sticky est maintenant de retour.

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

Plus de détails sont en Collez vos atterrissages! position: des terres gluantes dans WebKit.


16
2018-04-19 08:41



Je devais 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 ça a marché 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>

12
2018-04-30 13:55



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

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

Comme beaucoup l'ont indiqué, une clé ne définit aucun paramètre de position sur le fixed élément (non top, right, bottom, ou left valeurs).

Plutôt, nous mettons d'abord tous les éléments fixes (notez comment la dernière boîte en a quatre) dans la case où ils doivent être positionnés, comme ceci:

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

Ensuite, nous utilisons margin-top et margin-left pour les "déplacer" par rapport à leur conteneur, quelque chose comme le fait 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 fixed éléments ignorent tous les autres éléments de disposition, le conteneur final dans notre violon peut avoir plusieurs fixed éléments, et ont 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, comme ce violon de comparaison montre que si dispersé dans le contenu du conteneur, le positionnement devient peu fiable.

Si l'emballage est statique, relatif, ou absolu dans le positionnement, peu importe.


7
2017-12-12 18:39



Vous pouvez utiliser position: sticky propriété.

Voici un exemple CODEPEN démontrant l'utilisation et aussi comment il diffère de position: fixed.

Comment cela se comporte 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: relative jusqu'à 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 dans la page, c'est-à-dire occupe un espace spécifique sur la page (tout comme position: relative).

  3. Si elle est définie à l'intérieur d'un conteneur, elle est positionnée par rapport à ce conteneur. Si le conteneur présente un certain débordement (défilement), en fonction du décalage du défilement, il se met en position: fixe.

Donc, si vous voulez atteindre la fonctionnalité fixe mais à l'intérieur d'un conteneur, utilisez collant.


4
2018-01-20 10:51