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>

5

1 Answer 1

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>

3
  • 4
    This answer assumes the dev uses JQuery, which is not good.
    – mesqueeb
    Jul 12, 2021 at 4:53
  • 2
    The Author assumes the person who knows basics can convert jQuery into JavaScript :) Aug 6, 2021 at 15:16
  • @IsmailFarooq not asume that Jul 20, 2022 at 0:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.