设计叠加但反应灵敏的浮动div

Question

我想要做的就是像中画面的图像一样叠加div，但我希望它们在小屏幕上一个接一个地叠放：

（我使用bootstrap：D）

Something like this

CSS

#div-1 {
  position: absolute;
  top: 0;
  left: 0;
}

#div-2 {
  position: absolute;
  top: 150px;
  left: 100px;
}

#div-3 {
  position: absolute;
  top: 300px;
  left: 200px;
}

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div id="div-1" class="col-md-4 col-xs-12 bg-info" style="height: 250px">

    </div>
    <div id="div-2" class="col-md-4 col-xs-12 bg-secondary" style="height: 250px">

    </div>
    <div id="div-3" class="col-md-4 col-xs-12 bg-dark" style="height: 250px">
    </div>
  </div>
</div>

Answer 1

以div的风格使用媒体查询。请参考下面的代码段。这会将div叠加在一起，宽度小于786px，换句话说，当宽度小于786px时，它将遵循Bootstrap Style规则。

＆＃13;

＆＃13;

@media screen and (min-width: 786px){
#div-1 {
  position: absolute;
  top: 0;
  left: 0;
}

#div-2 {
  position: absolute;
  top: 150px;
  left: 100px;
}

#div-3 {
  position: absolute;
  top: 300px;
  left: 200px;
}
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div id="div-1" class="col-md-4 col-xs-12 bg-info" style="height: 250px">

    </div>
    <div id="div-2" class="col-md-4 col-xs-12 bg-secondary" style="height: 250px">

    </div>
    <div id="div-3" class="col-md-4 col-xs-12 bg-dark" style="height: 250px">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助。