Question

我需要将固定的位置应用于已应用转换的父级内的子div的视口。不幸的是，我无法删除父级的转换。

有关如何覆盖此行为的任何想法？
我可以在子元素上使用transform使其看起来类似于固定的位置吗？

.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>

Answer 1

答案很简单，CSS无法实现。有关详细信息，请访问以下问题

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

'transform3d' not working with position: fixed children

但你可以用js实现你的目标这是一个基本的例子。

＆＃13;

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

＆＃13;

.rotate {
  transform: rotate(30deg);
  background: blue;
   width: 300px;
  height: 300px;
  margin: 0 auto;
  
}
.fixed {
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;
}

＆＃13;

<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>

＆＃13;

父容器进行转换时如何强制固定位置？

1 个答案: