CSS 叠加层：如何在"fixed"元素上保持"relative"位置？

Question

我有一个简单的css/js动画，我用"position:fixed"属性对其进行了样式设置，使其覆盖页面上的其他元素。

然而，我仍然希望动画相对于其他元素定位自己，虽然这在全宽页面上似乎可以正常工作，但在移动布局上会出错。

下面是一个快速示例：https://codepen.io/Megistus/pen/poLGbyL

body{
background-color: yellow;
}
.body-sw {
background-color: none;
height: 20vh; 
display: block;
//align-items: center;
justify-content: center;
position: fixed;
top: 3%;
left: 0;
right: 0;
bottom: 0;
}
.sound-wave {
height: 20vh;
display: flex;
align-items: center;
//justify-content: center;
position: absolute;
top: 3%;
left: 0;
right: 0;
bottom: 0;
}
.body-sw .bar {
animation-name: wave-lg;
animation-iteration-count: 3;
animation-timing-function: ease-in-out;
animation-direction: alternate;
background: #006565;
margin: 0 1.5px;
height: 10px;
width: 1px;
}
.body-sw .bar:nth-child(-n+7), .body-sw .bar:nth-last-child(-n+7) {
animation-name: wave-md;
}
.body-sw .bar:nth-child(-n+3), .body-sw .bar:nth-last-child(-n+3) {
animation-name: wave-sm;
}
@keyframes wave-sm {
0% {
opacity: 0.35;
height: 10px;
}
100% {
opacity: 1;
height: 25px;
}
}
@keyframes wave-md {
0% {
opacity: 0.35;
height: 15px;
}
100% {
opacity: 1;
height: 50px;
}
}
@keyframes wave-lg {
0% {
opacity: 0.35;
height: 15px;
}
100% {
opacity: 1;
height: 70px;
}
}

(抱歉css太乱了，里面有很多不必要的废话！(

正如你所看到的，我希望动画能保持其在"；LOGO"；div和"；内容"；div，但对于扩展的"；条"；在动画中，以在播放动画时(在页面加载时(覆盖其上下的元素。

有办法做到这一点吗？

Answer 1

您实际上并不想使用position: fixed;。这将强制元素在页面上的固定位置。

相反，您可以设置position: absolute;，这将给您看起来相同的结果，但是，如果您稍微修改HTML，您可以使动画与徽标保持一致。

您需要将动画元素放置在包含徽标和动画的容器中。然后，如果将此父容器设置为position: relative;，则现在动画元素将保留在徽标中，并且您设置的position: absolute;将允许动画仍然覆盖徽标。

window.addEventListener("load", () => {
const bar = document.querySelectorAll(".bar");
for (let i = 0; i < bar.length; i++) {
bar.forEach((item, j) => {
// Random move
item.style.animationDuration = `${Math.random() * (0.7 - 0.2) + 0.2}s`; // Change the numbers for speed / ( max - min ) + min / ex. ( 0.5 - 0.1 ) + 0.1
});
}
});

body{
background-color: yellow;
}
.logo { position: relative; }
.body-sw {
background-color: none;
height: 20vh; 
display: block;
//align-items: center;
justify-content: center;
position: absolute;
top: -.5em;
left: -.5em;
right: 0;
bottom: 0;
}
.sound-wave {
height: 20vh;
display: flex;
align-items: center;
//justify-content: center;
}
.body-sw .bar {
animation-name: wave-lg;
animation-iteration-count: 3;
animation-timing-function: ease-in-out;
animation-direction: alternate;
background: #006565;
margin: 0 1.5px;
height: 10px;
width: 1px;
}
.body-sw .bar:nth-child(-n+7), .body-sw .bar:nth-last-child(-n+7) {
animation-name: wave-md;
}
.body-sw .bar:nth-child(-n+3), .body-sw .bar:nth-last-child(-n+3) {
animation-name: wave-sm;
}
@keyframes wave-sm {
0% {
opacity: 0.35;
height: 10px;
}
100% {
opacity: 1;
height: 25px;
}
}
@keyframes wave-md {
0% {
opacity: 0.35;
height: 15px;
}
100% {
opacity: 1;
height: 50px;
}
}
@keyframes wave-lg {
0% {
opacity: 0.35;
height: 15px;
}
100% {
opacity: 1;
height: 70px;
}
}

<br>
<br>
<br>
<div class="logo">
<h1>LOGO</h1>
<div class="body-sw">
<div class='sound-wave'>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
</div>
</div>
</div>

<div>   
<h1>Content....</h1>
</div>