有一个父 div 具有绝对定位，而孩子具有绝对定位。我的问题是使子 div 相对于整个页面而不是其父级：
例子：
.parent {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: blue;
overflow: hidden;
animation: move 2s infinite;
}
.child {
position: fixed;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
background-color: purple;
z-index: 2;
}
@keyframes move {
50% {
transform: translateX(25px);
}
}<div class="parent">
<div class="child"></div>
</div>目标是使小紫色 div 固定在屏幕左上角，并在蓝色大 div 蓝色移到屏幕外时隐藏。我试过sticky - fixed同样的结果。
您可以为子元素使用相反方向的动画，这将使子元素在一个位置看起来像是静态的。
.parent {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: blue;
overflow: hidden;
animation: move 2s infinite;
}
.child {
position: absolute;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
background-color: purple;
animation: moveBack 2s infinite;
z-index: 2;
}
@keyframes move {
50% {
transform: translateX(25px);
}
}
@keyframes moveBack {
50% {
transform: translateX(-25px);
}
}<div class="parent">
<div class="child"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句