我有一個由影像、gif (.gif) 和按鈕 (.Continue) 組成的網頁。我已經設法在調整螢屏大小時調整元素的大小；但是，我注意到當螢屏變小時元素會向左移動。.Continue 按鈕也會離開 gif，即使它應該位于它上面。
我想知道如何解決這個問題。任何幫助表示贊賞。
HTML
<div class="container">
<div class="image-container">
<img src="./Images/1.gif" alt="">
<img class="transition-image" src="./Images/2.gif" alt="">
<div class="gif">
<div class="Continue">
<a href="./Page/index.html">
Continue
</a>
</div>
</div>
</div>
CSS
.container {
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin-left: -2%;
}
.image-container {
height: 90%;
position: absolute;
margin-top: 5%;
margin-left:15%;
}
.image-container img {
width: 100%;
height: 100%;
}
.transition-image {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
width: 100%;
height: 100%;
}
.transition-image:hover {
opacity: 1;
}
.gif {
background: url(./Images/3.gif);
position: relative;
background-repeat: no-repeat;
background-size: 100%;
height: 115%;
width: 115%;
margin-left: 105%;
margin-top: -142%;
}
.Continue {
position: absolute;
margin-top: 112%;
margin-left: 65%;
font-family: arcade;
animation-name: fadeIn ;
animation-duration: 5s;
animation-delay: 0s;
opacity: 0;
animation-fill-mode: forwards;
}
uj5u.com熱心網友回復：
請試試這個：
在 .container 上設定 margin-left:0
從 .image-container 中洗掉 margin-left 和 margin-top。而是添加底部：0; 對：0；
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418604.html
標籤：