将大屏幕尺寸叠加的图像叠加，而不是作为屏幕收缩而堆叠

Question

对糟糕的标题表示歉意，我的术语很弱，但我正在努力。

我有一个div部分覆盖屏幕宽度较大的背景图像。对于较小的屏幕宽度，我希望Div落在背景图像以下，而不是继续覆盖背景图像，就像我目前在这支笔中所拥有的：

https://codepen.io/ywehc/pen/kqqqen

<div class="container-fluid" style="width:cover">
    <img src="https://images.unsplash.com/photo-1490641525855-f5ffa411459d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85bad8135a13687bbd2ac661023e8dc4&auto=format&fit=crop&w=1189&q=80" style="width:100%">
  <div class="overlaid-div" style="background-color: blue; height: 15em; width: 20em; margin-left:50%; margin-top: -100px; position: relative">
  </div>
  <div class="randomelement" style="width: 30em; height:10em; background-color: black">
  </div>
</div>

基本上，我想保持大屏幕宽度的覆盖层，但是随着屏幕宽度的变化，DIVS应垂直堆叠，蓝色DIV不应再覆盖。

谢谢！

Answer 1

您只需要一个媒体查询即可实现此目的(必要时调整断点宽度(。

@media only screen and (max-width: 700px) {
  .overlaid-div {
    /* !important is needed to override your inline margin style */
    margin-top: 0 !important;
  } 
}

https://codepen.io/antibland/pen/xzgezo

Answer 2

将其添加到CSS。您应该使用@media根据所需的屏幕尺寸更改边距

@media only screen and (min-width:400px){ // Change 400px to your desired the maximum of smallest width screen
  .overlaid-div {
    margin-top: 0%
  }
}  
@media only screen and (min-width:1000px){
  .overlaid-div {
    margin-top: -10%
  }
}  

和，从内部样式删除 margin-top