Question

为糟糕的头衔道歉，我的术语很薄弱，但我正在努力。

当屏幕宽度较大时，我有一个部分覆盖背景图像的div。对于较小的屏幕宽度，我希望将div放在背景图像下方，而不是继续覆盖背景图像 - 就像我现在在这支钢笔中所拥有的那样：

<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>

所以基本上我想保持叠加大屏幕宽度，但随着屏幕宽度变小，div应垂直叠加，蓝色div不应再叠加。

谢天谢地！

Answer 1

将此添加到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

Answer 2

您只需要一个媒体查询即可实现此目的（根据需要调整断点宽度）。

@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

div在大屏幕尺寸上覆盖图像，而不是在屏幕缩小时堆叠

2 个答案: