我需要将固定位置应用于已应用转换的父级中子div的视口(viewport)。
不幸的是，我无法删除父项上的转换。
.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>最佳答案
答案很简单，这是CSS无法实现的。请访问以下问题以获取详细信息
Positions fixed doesn't work when using -webkit-transform
'transform3d' not working with position: fixed children
但是您可以使用js实现目标，这是一个基本示例。
$(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>关于javascript - 当父容器进行转换时，如何强制固定位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47326644/