Gif不想移动

Question

我的gif不想动，我试着用左，右，但是没有什么工作，我需要把这张照片放在中间的两个在上面。

图片

​

 /* Img*/
figure {
  position: relative;
  top: 1200px;
  right: -200px;
  }
    
  figure:before,
  figure:after {
  content: '';
  left: 500px;
  position: absolute;
  }
    
  img {
  border-radius: 10px;
  margin: 0;
  padding: 0;
  }

  .image3 {
    border-radius: 20px;
    right: -500px;
  }

<figure>
    <img src="webbsite skins pic.jpg" class="image1" style="width:500px;height:300px;">
    <img src="patterns.png" class="image2" style="width:500px;height:300px;">
    <img src="pattern_gif.gif" class="image3" style="width:700px;height:300px;">
</figure>

​

Answer 1

使用Flexbox，您可以很容易地在flex容器中更改元素的order。容器(figure)已经删除了绝对定位，因此不需要向下滚动以查看结果。

​

figure {
  position: relative;
  display:flex;
  min-width:1700px;
  /*
  position: relative;
  top: 1200px;
  */
}

img {
  border-radius: 10px;
  margin: 0.1rem;
  
  width:500px;
  height:300px;
}

.image1{order:1}
.image2{order:3}

.image3 {
  border-radius: 20px;
  order:2;
  width:700px;
}

<figure>
  <img src="http://placekitten.com/300/200" class="image1" />
  <img src="https://pngquant.org/Ducati_side_shadow.png" class="image2" />
  <img src="https://media.giphy.com/media/6SZ5iwN70lJyOdLZZH/giphy.gif" class="image3" />
</figure>

​

Answer 2

尝试而不是定位：

transform: translateX(your position)