CSS: position: fixe à l'intérieur de la position: fixe
OK, j'ai remarqué quelque chose, mais je n'ai pas pu le trouver dans la spécification CSS. Le style d'un élément position: fixed position absolument, à l'égard de la fenêtre d'affichage du navigateur. Que se passe-t-il si vous placez un élément de position fixe à l'intérieur d'un autre élément? Exemple 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 façon fixe par rapport à son parent le plus proche qui est également positionné de façon fixe. Est-ce que cet osbervable dans tous les navigateurs; aussi, est-ce un bug, ou un comportement intentionnel?
jusqu'à présent je n'ai rien trouvé sur ce sujet sur internet, juste "position fixe le rend coller à la page".
3 réponses
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
la position de la boîte est calculée selon pour les "absolus" modèle, mais en plus, la boîte est fixe par rapport à une référence.
Positionnement
définition de bloc contenant dit:
si l'élément a 'position: fixed', le bloc contenant est établi par le viewport dans le cas d'un support continu (...)
et
Si l'élément a 'position: absolute', le bloc contenant est établi par l'ancêtre le plus proche avec une "position" de "l'absolu", "relatif" ou "fixe" (...)
ce qui suggère que bien que leur algorithme de positionnement soit le même (ils sont tous les deux positionnés par rapport à leur bloc contenant), le bloc contenant pour les éléments fixes est toujours le viewport, contrairement aux éléments absolument positionnés, donc ils devraient être positionnés par rapport à et non à aucun absolument ou fixé-positionné élément.
Et comme une question de fait, qui est effectivement le cas. Par exemple, si vous ajoutez top: 20px.fixed, les deux divs seront positionnés à 20 pixels du haut du viewport. Le div fixe imbriqué ne se positionne pas à 20 pixels du dessus de son parent.
la raison pour laquelle vous ne voyez pas cela dans ce cas est parce que vous ne mettez pas réellement l'une des propriétés de gauche/haut/droite/bas, de sorte que leurs positions sont déterminées par la position qu'ils auraient dans le flux (" position statique"), qui, comme ma première citation dit, se fait selon le modèle absolu.
je ne pense pas que ce soit vraiment l'intention. Choses avec correction du positionnement sont positionnés par rapport à la fenêtre, si vous avez une correction d'un enfant d'un autre fixe, que voulez-vous arriver? Vous pouvez facilement dupliquer le comportement en ne positionnant pas 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. : D
je ne pense pas qu'il n'y a rien de plus à ce à quoi w3c dire qu'il y a:
Génère un positionnement absolu élément, positionné par rapport au fenêtre de navigateur. La position de l'élément est spécifié avec la "gauche", "haut", "droite" et "bas" propriétés
donc si vous vous débarrassez de ce "padding: 40px;" vous obtiendrez 2 elements-1 par rapport à un autre.
même effet que si vous positionnez les deux éléments absolument vers le haut:0 gauche:0 avec le même parent(corps).