Position fixe ne fonctionne pas fonctionne comme absolu

Question

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

Answer 1

Ici, le problème réside avec vos .content-container classe wrapper, qui a un CSS déclaration d' webkit-transform: translate3d(0,0,0). La transformation de la déclaration, que cette réponse illustre, modifie le contexte de positionnement de la fenêtre d'affichage de la rotation de l'élément, ce qui signifie essentiellement que votre fixed élément se comporte comme si elle était en position absolue. Voici un exemple montrant la différence entre un élément fixe à l'intérieur d'une transformée div et un élément fixe à l'extérieur de l' 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 aurez besoin de retirer l' transform3d déclaration d' .content-container.

Answer 2

Pour quelqu'un demande si c'est un bug lié au navigateur. Apparemment, il n'est pas et il suit spécifications du W3C. Ce qui est étrange, c'est au début, c'était juste incohérent entre les navigateurs (dans certains, il a travaillé comme prévu) et ensuite tous les d'eux a commencé à suivre les contre-intuitif règles W3C. Il semble y avoir aucune explication claire si c'est effectivement destiné logique, un effet secondaire de certains problèmes de mise en œuvre, ou simplement un idiot omission.

Aussi position: fixed se casse pas seulement en transform mais aussi par filter et perspective des biens mis sur n'importe quel ancêtre, comme expliqué ici.

Voir: https://www.w3.org/TR/css-transforms-1/#propdef-transformet 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 cette question.

Answer 3

C'est un problème spécifique au mobile. J'ai rencontré ce problème auparavant. De manière générale, les navigateurs mobiles, en particulier les plus anciens, limitent l’utilisation du positionnement fixe car il peut prendre trop de place à l’écran.

http://bradfrost.com/blog/mobile/fixed-position/