调整大小时元素向左移动

Question

我有一个由图像、gif (.gif) 和按钮 (.Continue) 组成的网页。我已经设法让元素在调整屏幕大小时调整大小；但是，我注意到当屏幕变小时，元素会向左移动。 .Continue 按钮也会离开 gif，即使它应该位于 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

请试试这个：

在 .container

上设置 margin-left:0

从 .image-container 中删除 margin-left 和 margin-top。而是添加 bottom:0; right:0;

调整大小时元素向左移动

Elements shifting to the left when resizing

html

css

resize

position

css-position