Question

我一直试图在不使用Position：absolute的情况下在彼此之上添加两个div，但它无效。

有谁知道怎么做？谢谢。

Caffe

Answer 1

如果两个元素都处于正常流程中，则可以在元素上使用负边距顶部，并将其叠加在它的前身之上：

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.box {
  padding: 20px;
  background: coral;
}

.box--overlay {
  background: rgba(0, 255, 255, 0.4);
  text-align: right;
  margin-top: -40px; /*Change this to a value of your choosing*/
}

＆＃13;

<div class="box">I am box 1</div>
<div class="box box--overlay">I am box 2</div>

＆＃13;

Answer 2

你可以使用网格来做到这一点。

＆＃13;

.parent {
  display: grid;
  grid-template-columns: 1fr;
}

.parent div {
 padding: 50px;
 background-color: rgba(0,0,0,0.5);
 grid-row-start: 1;
 grid-column-start: 1;
}

＆＃13;

<div class="parent">
  <div class="child1">
  1
  </div>
  <div class="child2">
  2
  </div>
</div>

＆＃13;

Answer 3

尝试给出相对于两个元素的位置，并使用z-index 2将第二个元素对齐第一个元素，然后使用top :(）;剩下：（）;这不会影响你的导航栏。

Answer 4

这是一种方法，尽管更干净的方法可能是使用javascript获取要覆盖的元素的宽度，以便您可以动态覆盖元素，而无需静态为左边缘留出确切的像素值，就像这样蓝色div的CSS情况

.red {
  background: rgba(255,0,0,0.5);
  display: inline-block;
}
.blue {
  background: rgba(0,0,255,0.5);
  display: inline-block;
  margin-left: -24px;
}

<div class="red">red</div>
<div class="blue">blue</div>

在不使用Position：absolute的情况下将两个div放在彼此的顶部

4 个答案: