调整屏幕大小时 Div 重叠

Question

我有一个由导航栏、gif (.gif) 和按钮 (.Continue) 组成的网页。调整屏幕大小时，导航栏会调整大小：但是，我在让 gif 和按钮相应地调整大小时遇到了一些问题。

如您所见，gif 调整了大小，但“继续”按钮没有；相反，它向上移动并位于 gif 上方。我正在努力弄清楚如何解决这个问题，如果有任何建议，我将不胜感激。我试过填充和边距，但没有任何效果。

HTML

<div class="container">

    <div class="gif"></div>

    <div class="Continue">
    <a href="./Page/index.html">
    Continue
    </a>
    </div>

</div>

CSS

.container {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.gif {
    background: url(./Images/1.gif);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 91%;
    width: 85%;
    max-width: 85%;
    left: 7%;
    top: 25%;
}

.Continue {
   position: absolute;
   top: 87%;
   left: 43%;
   overflow: hidden;
   }

a {
    z-index: 10000;
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #d4337e;
    font-family: arcade;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 60px;
    overflow: hidden;
    transition: 0.2s;
    top: -10px;
}

a:hover {
    color: #ffffff;
}

Answer 1

我觉得你的问题是position: absolute;在您的继续 class 中。它将 div 粘附到页面呈现时所在的位置。还使用 margin-top 和 margin-left insted 来定位 div.

调整屏幕大小时 Div 重叠

Divs overlapping when screen is resized

html

css

resize

position

css-position