調整大小時元素向左移動

Question

我有一個由圖像、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;


}

Answer 1

請試試這個：

設置 margin-left:0 on.container

從 .image-container 中刪除 margin-left 和 margin-top。 而是添加底部：0； 對：0；