如何在CSS中叠加div

Question

我想知道this website在CSS中如何做到这一点

我试图找到如何通过检查元素，但没有运气。 是否有人能够在不使用position: relative的情况下重现此内容？

我正在使用：

{
   position: relative;
   top: -100px;
}

Answer 1

关键是在下方div上使用否定margin-top。

.upper{
  width:100%;
  height:100px;
  margin:0;
  padding:0;
  background-color:green;
}
.lower{
  width:80%;
  height:100px;
  margin:0 auto;
  padding:0;
  background-color:red;
  margin-top:-30px;
}

<div class="upper"></div>
<div class="lower"></div>