Html 如何使一个div与另一个div重叠

墙纸分区必须位于另一分区的下方墙纸分区被javascript激活并切换墙纸，但我不知道如何将其置于另一分区的下方请帮助使用位置：第一分区上的绝对值：

参考代码：

<header>
<div>
  <h1>Midorikawa's Site</h1>
  <hr />
  <!--<p>Work in progress</p>-->
  <nav>
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Quote</a></li>
      <li><a href="">Photographs</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</div>
<div id="wallpaper"></div><!-- THIS div has to go underneath the other div -->
</header>

---

在div上使用css属性z-index。你需要在顶部的那个应该比它下面的那个有更高的z指数。我给div上色是为了视觉效果

.content {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.body {
  position: relative;
}

使用位置：绝对位置；在两个孩子身上。 在要放在顶部的div上使用正z索引

---

jshiddle:

当我改变位置时，div不会居中。你在最初的问题中没有提到你希望它被切掉。检查已编辑的代码，使其显示在中间。还有一个问题，它现在位于左右中心。如何使其垂直？它仍然不在下面

.content {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.body {
  position: relative;
}

<div style="position:absolute">
<h1>Midorikawa's Site</h1>
<hr />
<nav>
<ul>
  <li><a class="active" href="#">Home</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Quote</a></li>
  <li><a href="">Photographs</a></li>
  <li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<div id="wallpaper" style="width:50px;height:100px;background-color:red;z- index:-5"></div>