css - 如何在CSS中覆盖一个div

Question

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

我试图通过 inspect element 找到方法，但没有成功。是否有人能够在不使用 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>