6

I need to apply position fixed to the viewport of a child div inside a parent which has a transformation applied. Unfortunately I cannot remove the transformation on the parent.

  • Any ideas how to overrides this behavior?
  • Can I use transform on the child element to make it looks similar to position fixed?

.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>
GibboK
  • 71,848
  • 143
  • 435
  • 658
  • You want the fixed element inside the div to be the same as the fixed element outside? – Carl Binalla Nov 16 '17 at 10:02
  • @Swellar Yes, correct! – GibboK Nov 16 '17 at 10:03
  • 1
    Possible duplicate of [Positions fixed doesn't work when using -webkit-transform](https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform) – Ismail Farooq Nov 16 '17 at 10:06
  • 1
    and this answer explain well https://stackoverflow.com/a/15256339/2724173 – Ismail Farooq Nov 16 '17 at 10:16
  • Possible duplicate of ['transform3d' not working with position: fixed children](https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children) – Jesse Nov 16 '17 at 10:17

1 Answers1

0

The Answer is simple this is not possible with CSS. Visit the following question for details

Positions fixed doesn't work when using -webkit-transform

'transform3d' not working with position: fixed children

But you can achieve your target with js here is a basic example.

$(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>
Ismail Farooq
  • 6,309
  • 1
  • 27
  • 47