为糟糕的头衔道歉,我的术语很薄弱,但我正在努力。
当屏幕宽度较大时,我有一个部分覆盖背景图像的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不应再叠加。
谢天谢地!
答案 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;
}
}