Javascript 如何将一个div置于另一个div之上？

我的代码是：

HTML:

输出为： 我想：

---

有人能帮我吗？

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

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

---

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

一点立场可以帮助你，下面是一个粗略的版本，希望能让你思考你需要做什么：

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

---

这里有一个分叉引导层：

1，以防您希望您的下横幅具有全宽：

您可以添加位置：相对；添加一个底部值，并使用边距创建与问题中相同的视觉效果

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

2如果你不需要有一个全宽的横幅，只需将其居中，那么就不需要使用边距。记住将一个父项设置为位置：相对；：

代码笔

---

我的解决方案使用jQuery和一些计算。即使在文档周围移动元素，我的计算也可以工作。我还使用CSS作为您想要的页边距

jQuery

CSS

输出

这是我的建议

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

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

---

你能发布一个预期结果输出的示例吗？@Hackerman和我想要：，他希望引导层看起来像他发布的图片。css translate属性在这里可能很有用：有多种方法可以实现你所需要的。你尝试了什么？检查我的答案是否能帮助你。我不想要负边距。我想用position属性来解释它。

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

 #banner { position:relative;}

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

//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});

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

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