如何在Bootstrap3中将一个容器悬停在另一个容器上

Question

我正在尝试在bootstrap3中实现以下设计。

有谁知道如何将container2悬停在container1上？ 我可以使用这个位置：绝对的方式，但我认为必须有更好的方法来做到这一点。

感谢。

Answer 1

试试这个：

.container-1 {
  position: relative;
  z-index: 0;
}

.container-2 {
  position: relative;
  z-index: 1;
  top: -50px;
}

HTML：

<div class="container container-1">...</div>
<div class="container container-2">...</div>

Answer 2

您可以在“容器2”上使用margin-top来获得此效果

.container-2 {
    margin-top: -200px;
}

http://jsfiddle.net/mwo8jdeL/

Answer 3

http://i.stack.imgur.com/rxKfW.png

的index.html

 [![<div class="container-fluid">
      <div class="row one">
        <div class="col-md-12">
        </div>
      </div>
      <div class="row two">
        <div class="col-md-12">
        </div>
      </div>
    </div>][1]][1]

CSS文件

.one{
    background-color: red;
    height: 400px;
}

.two{
    background-color: green;
    height: 400px;
    margin-top: -100px;
    margin-left: 15%;
    margin-right: 15%;
}