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 left
et top
proprié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 top
et left
seront désormais liées au conteneur, en respectant la box-sizing
proprié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