web-dev-qa-db-fra.com

CSS: position: fixe à l'intérieur de la position: fixe

D'accord, j'ai remarqué quelque chose, mais je ne l'ai pas trouvé dans la spécification CSS. Styliser un élément avec position: fixed le positionnera absolument, par rapport à la fenêtre du navigateur. Que se passe-t-il si vous placez un élément à position fixe à l'intérieur d'un autre? Exemple de CSS dans le sens de:

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
}

#parent { right 100px;  padding: 40px; }

.fixed .fixed { background: blue; }

Et HTML:

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

Pour autant que je sache, l'élément est positionné de manière fixe par rapport à son parent le plus proche qui est également positionné de manière fixe. Est-ce osbervable dans tous les navigateurs; est-ce aussi un bug ou un comportement intentionnel?

Jusqu'à présent, je n'ai rien trouvé sur ce sujet sur Internet, juste "la position fixe le fait coller à la page".

cssnested
50
user146570

La fixation et le positionnement sont deux choses distinctes. Ils sont positionnés de la même manière que les éléments absolument positionnés: par rapport à leur contenant le bloc . Mais contrairement aux éléments absolument positionnés, ils restent fixés à cette position par rapport à la fenêtre (c'est-à-dire qu'ils ne bougent pas lors du défilement):

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

La position de la boîte est calculée selon le modèle "absolu", mais en plus, la boîte est fixe par rapport à une référence.

Positionnement

définition du bloc contenant dit:

Si l'élément a 'position: fixed', le bloc conteneur est établi par la fenêtre d'affichage dans le cas d'un média continu (...)

et

Si l'élément a 'position: absolue', le bloc conteneur est établi par l'ancêtre le plus proche avec une 'position' absolue, relative ou fixe (...)

ce qui suggère que bien que leur algorithme de positionnement soit le même (ils sont tous deux positionnés par rapport à leur bloc conteneur), le bloc conteneur pour les éléments fixes est toujours la fenêtre, contrairement aux éléments absolument positionnés, ils doivent donc être positionnés par rapport à que et non à des éléments positionnés de manière absolue ou fixe.

Et en fait, c'est bien le cas. Par exemple, si vous ajoutez top: 20px à .fixed, les deux div seront positionnées à 20 pixels du haut de la fenêtre. Le div fixe imbriqué n'est pas positionné à 20 pixels du haut de son parent.

La raison pour laquelle vous ne voyez pas cela dans ce cas est parce que vous ne définissez en fait aucune des propriétés gauche/haut/droite/bas, donc leurs positions sont déterminées par la position qu'elles auraient dans le flux (leur "- position statique "), qui comme ma première citation l'a dit, se fait selon le modèle absolu.

38
mercator

Je ne pense pas que ce soit vraiment l'intention. Les objets à positionnement fixe sont tous positionnés par rapport à la fenêtre, si vous avez un enfant fixe d'un autre fixe, que voulez-vous qu'il se passe? Vous pouvez facilement dupliquer le comportement en positionnant non seulement les deux éléments fixes séparément, ou en utilisant une autre position pour modifier la position de l'enfant dans l'élément fixe. :RÉ

2
Gordon Gustafson

Je ne pense pas qu'il y ait autre chose à cela que ce que w3c dit:

Génère un élément absolument positionné, positionné par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée avec les propriétés "gauche", "haut", "droite" et "bas"

Donc, si vous vous débarrassez de ce "padding: 40px;" vous obtiendrez 2 éléments - 1 sur un autre.

Même effet que si vous positionniez les deux éléments absolument en haut: 0 à gauche: 0 avec le même parent (corps).

2
Gavrisimo