web-dev-qa-db-fra.com

Position fixe ne fonctionne pas fonctionne comme absolu

ma question est assez simple. Je travaille sur une page de la version mobile et nous voulons garder le bouton jaune "accrocher" fixé en bas, mais la position fixe ne fonctionne pas, elle fonctionne comme une position absolue et je ne sais pas pourquoi.

La page que je travaille: https://www.thechivery.com/products/everything-is-j-ok-tee

Merci, Luiz

csscss3
39
Luiz Mitidiero

Le problème ici réside dans votre classe wrapper .content-container, qui a une déclaration CSS de webkit-transform: translate3d(0,0,0). La déclaration de transformation, telle que cette réponse illustre , modifie le contexte de positionnement de la fenêtre d'affichage en élément pivoté, ce qui signifie essentiellement que votre élément fixed se comporte comme s'il était absolument positionné. Voici un exemple montrant la différence entre un élément fixe dans une div transformée et un élément fixe en dehors de cette div.

.rotate {
  transform: rotate(30deg);
  background: blue;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.fixed {
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;
}
<div class="rotate">
  <div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>

Pour que tout fonctionne, vous devez supprimer la déclaration transform3d de .content-container.

98
litel

Pour ceux qui se demandent s'il s'agit d'un bug de navigateur. Apparemment, ce n'est pas le cas et cela suit les spécifications actuelles du W3C. Ce qui est étrange, au début, c’est qu’il s’agissait simplement d’une incohérence entre les navigateurs (dans certains cas, cela fonctionnait comme prévu), puis tous ont commencé à suivre les règles intuitives du W3C. Il ne semble pas y avoir d’explication claire quant à la logique voulue, à l’effet secondaire d’un problème de mise en œuvre ou à une simple omission.

De plus, position: fixed est cassé non seulement par transform mais également par les propriétés filter et perspective mises sur n'importe quel ancêtre, comme expliqué here .

Voir: https://www.w3.org/TR/css-transforms-1/#propdef-transform et https://www.w3.org/Bugs/Public/show_bug cgi? id = 16328 et https://github.com/w3c/csswg-drafts/issues/913 pour plus d'informations sur ce sujet.

2
konrad

Dans mon cas, le problème a été causé par le mélange d'une css transform avec overflow: auto; sur le parent.

J'ai créé un nouvel élément enfant sur lequel j'ai déplacé la propriété overflow.

La séparation des deux propriétés a résolu le problème.

0
Etienne Martin