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

时间:2018-02-13 02:21:05

标签: html css bootstrap-4

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

当屏幕宽度较大时,我有一个部分覆盖背景图像的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>

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

谢天谢地!

2 个答案:

答案 0 :(得分: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

答案 1 :(得分: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