如何在另一个div上方放置一个div？

Question

我的代码是：

HTML：

<section>
    <div id="banner">
        <div class="container">
          <p class="para">hello world</p>
        </div>
        <div class="container banner-bottom">
            <div class="card card-primary text-center z-depth-2 contact-main-text">
                <div class="card-block">
                    <p class="white-text">Please fill out the form below and ESC 
staff will be in contact with you shortly.</p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS：

.para{
  color:white;
  background: red;
    padding:70px;
    text-align:center;}

  .white-text{
      background:green;
      padding:20px;}

输出为： Bootply
而且我要：

有人可以帮我吗？

Answer 1

您可以设置负的上边距以覆盖第二个div，请参见实时示例：

<div class="container banner-bottom" style="margin-top:-5%;padding:2%">

http://www.bootply.com/MorC45NB4V

PS：我使用内联CSS只是为了显示，请避免使用内联CSS。

Answer 2

我的解决方案使用jQuery和一些计算。 即使您在文档中四处移动元素，我的计算也仍然有效。 我还使用CSS获得所需的边距。

jQuery的

//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});

的CSS

 p.white-text{
  margin-left:5%;
  margin-right:5%;
}

输出量

引导

Answer 3

1）如果您希望下部横幅具有完整宽度：

您可以添加位置：相对； 放置在较低的横幅上，并放置一个底值，并使用边距创建与问题中相同的视觉效果。

.banner-bottom {
  position: relative;
  bottom: 45px;
  margin: 0 40px;
}

2）如果您不需要全宽横幅并将其居中，则无需使用边距。 记住将一个父母定为职位：亲戚； ：

 #banner { position:relative;}

.banner-bottom { 
  position: absolute;
  top:75%;
  right:0;
  bottom:auto;
  left:0;
 }

CODEPEN

http://codepen.io/alexincarnati/pen/PWOPjY

Answer 4

这是我的解决方案 。

基本上只需将卡块的位置设置为“相对”，相应地将“顶部”位置定位，然后将边距设置为“自动”以使其居中。

.card-block {
    position: relative;
    top: -50px;
    margin: auto;
    width: 80%;
}

Answer 5

一点位置可以对您有所帮助，这是一个粗略的版本，希望可以使您思考需要做的事情：

#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }

这是一个分叉的引导程序： http : //www.bootply.com/Imuh4wUj50