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%;
}

<强>输出

bootply

Answer 3

1）如果您希望下横幅具有全宽：

您可以将 position：relative; 添加到下方横幅，并将其添加到底部值并使用margin来创建问题中询问的相同视觉效果。

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

2）如果你不需要有一个全宽的横幅并且只是居中，那么就不需要使用边距。请记住将一个父级设置为 position：relative; ：

 #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 { 位置：相对; 上：-50px; 保证金：自动; 宽度：80％; }

Answer 5

一些位置可以帮助你，这是一个粗略的版本，希望能让你思考你需要做什么：

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

Heres a forked bootply：http://www.bootply.com/Imuh4wUj50

如何将div放在另一个div之上？

5 个答案: