css动画div从下到中

Question

我有一个最初隐藏的 div。我希望它显示自己并从底部（窗口外）移动到从窗口顶部到窗口高度的 90% 左右，然后再回到窗口外，它再次隐藏起来。动画效果很好，唯一的问题是在较大的屏幕中，它显示在屏幕中间，这是我不想要的。我怎样才能让所有屏幕中的窗口（底部）都来自（底部）？

最初，我将组件设置在主根 div 内，因此 sa-root 将相对于主根 div 绝对定位。但问题是 sa-root 会出现在第 4 节中主根 div 的底部，而我希望它出现在第 2 节中。所以，我将其设置在第 2 节中。

到目前为止我得到的 css：

#sa-root {
    position: absolute;
    visibility: hidden;
    bottom: -50px;
    display: flex;
    left: 50%;
    transform: translate(-50%, 0%);
    justify-content: space-evenly;
    font-size: 16px;
    line-height: 21px;
    background-color: rgba(217, 217, 217, 1);
    color: #959595;
    border-radius: 43px;
    height: 42px;
    align-items: center;
    padding: 0px 27px;
    width: fit-content;
    animation-name: showandhide;
    animation-duration: 5s;
    animation-delay: 2s;
    z-index: 10;
}

@keyframes showandhide {
    0% { bottom: calc(-10vh); visibility: visible; }
    50% { bottom: calc(8vh); }
    85% { bottom: calc(8vh); }
    100% { bottom: calc(-10vh); visibility: hidden; }
}

html:

<div id="main">
    <section id="section1">
        //some content
    </section>
    <section id="section2">
        { showAlert && <CAlert/> }
        //some content
    </section> 
    <section id="section3">
        //some content
    </section>
    <section id="section4">
        //some content
    </section>
</div>

Answer 1

事实证明，我所要做的就是将它添加到 sa-root。这样，无论您将组件放置在何处，它都会相对于窗口绝对定位自己。

position: fixed;