我有一個由導航欄、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;
}
uj5u.com熱心網友回復:
我認為你的問題是位置:絕對;在您的繼續課程中。當頁面被渲染時,它將 div 粘合到它所在的位置。還使用其他的 margin-top 和 margin-left insted 來定位 div。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/418313.html
標籤:
下一篇:如何同時顯示兩種不同的圖表模式
