Comment forcer la position fixe lorsque le conteneur parent a une transformation ?

Question

Comment forcer la position fixe lorsque le conteneur parent a une transformation ?

Demandé el 16 de Novembre, 2017: Quand la question a-t-elle été
1589 affichage: Nombre de visites la question a
1 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai besoin d'appliquer une position fixe à la fenêtre d'un div enfant à l'intérieur d'un parent qui a une transformation appliquée. Malheureusement, je ne peux pas supprimer la transformation sur le parent.

Avez-vous une idée de la manière de contourner ce comportement ?
Puis-je utiliser la transformation sur l'élément enfant pour qu'il ressemble à une position fixe ?

.rotate { transform: rotate(30deg); background: blue; width: 300px; height: 300px; margin: 0 auto;

} .fixed { position: fixed; background: red; padding: 10px; color: white; top: 50px; }

<html> <body> <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> </body> </html>

Demandé el 16 de Novembre, 2017 par GibboK

Answer 1

1 Réponses

Answer 2

0voto

Ismail Farooq Points 3692

La réponse est simple : ce n'est pas possible avec CSS. Visitez la question suivante pour plus de détails

Les positions fixes ne fonctionnent pas lorsque l'on utilise -webkit-transform

transform3d ne fonctionne pas avec position : fixed children

Mais vous pouvez atteindre votre objectif avec js : voici un exemple de base.

$(window).scroll(function() {
    $(".transform-fixed").css({
        "top": $(window).scrollTop()
    });
})

.rotate {
  transform: rotate(30deg);
  background: blue;
   width: 300px;
  height: 300px;
  margin: 0 auto;

}
.fixed {
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="rotate">
    <div class="fixed transform-fixed"> I am fixed inside a rotated div.</div>
  </div>
  <div class="fixed"> I am fixed outside a rotated div.</div>
</body>

</html>

Répondu el 16 de Novembre, 2017 par Ismail Farooq (3692 Points )

Comment forcer la position fixe lorsque le conteneur parent a une transformation ?

Réponse

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment forcer la position fixe lorsque le conteneur parent a une transformation ?

Réponse

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: