在调整浏览器大小时，如何使图像不与其他内容重叠

Question

当我调整浏览器大小时，图像与视频重叠，我不希望重叠。我希望他们在调整浏览器大小时保持原位。

iframe {
    display: block;
    margin: 0 auto;
    margin-top: 60px;

}

.png1 img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin: -430px 210px 850px;
}

.png2 img{
    display: inline-block;
    max-width: 100%;
    height: auto;
    float: right;
    position: relative;
    top: -85.100em;
    right: 150px;
}

<div class="video">
    <iframe width="600" height="415" src="https://www.youtube.com/embed/c9Qg7vm0lSk" frameborder="0" fullscreen></iframe>
    </div>
     <div class="png1">
      <img src="https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/uploads/2016/03/Adventure-Boy-Featured-Game-Art.png">
      </div>
     <div class="png2">
       <img src="http://gameartpartnersimagehost.s3.amazonaws.com/wp-content/uploads/2016/07/royalty-free-game-art-commando-thumbnail0003.png">
       </div>

Answer 1

因为.png1 img使用保证金作为关键值，而.png2 img使用top值relativly来表示该图像。尝试删除这些属性，您将获得逐行

iframe {
    display: block;
    margin: 0 auto;
    margin-top: 60px;
    max-width: 100%;

}
.video,.png2,.png1 {
    float: left;
    width: 33%;
}
.png1 img {
    max-width: 100%;
    height: auto;
}

.png2 img{
    display: inline-block;
    max-width: 100%;
    height: auto;
}

Answer 2

你也应该学习Media queries，这会很有帮助。调整窗口大小以查看图像向下移动。

<强>桌面

移动

.col {
  color: #fff;
  float: left;
  margin: 2%;
  width: 46%;
}

.one {
  background-color: none;
}

.two {
  background-color: none;
}

@media screen and (max-width: 600px) {
  .col {
    float: none;
    margin: 0;
    width: 100%;
  }
}

iframe {
  display: block;
  margin: 0 auto;
  margin-top: 60px;
}

<div id="container">
  <div class="row">
    <div class="video">
      <iframe width="600" height="415" src="https://www.youtube.com/embed/c9Qg7vm0lSk" frameborder="0" fullscreen></iframe>
    </div>
    <div class="col one">
      <img src="https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/uploads/2016/03/Adventure-Boy-Featured-Game-Art.png">
    </div>
    <div class="col two">
      <img src="http://gameartpartnersimagehost.s3.amazonaws.com/wp-content/uploads/2016/07/royalty-free-game-art-commando-thumbnail0003.png">
    </div>
  </div>
</div>