Question

<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必须在另一个div下面“壁纸”div是javascript激活并切换壁纸淡出但我不知道如何得到它在其他div下面请帮助

Answer 1

在第一个div上使用position: absolute：

参考代码：

<header>
<div class="content">
  <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>

<强> CSS

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

.body {
  position: relative;
}

Answer 2

在你的div上使用css property z-index。你需要在顶部的那个应该具有比它下面应该更高的z-index（我为视觉上的div着色）。

<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>

Answer 3

对position: absolute;的两个孩子使用<header>。在您想要的div上使用正z-index。

jsFiddle：https://jsfiddle.net/sukritchhabra/89f1est4/

如何让div与另一个重叠

3 个答案: