html - 不能在另一个 div 中定位 div

Question

有个奇怪的问题一直困扰着我。我只有 3 样东西 - 导航栏、背景和我想放置的随机按钮。我尝试了两件事——将带有按钮的 DIV 放在带有背景的 DIV 中(我认为这是正确的)，然后将它放在单独的 DIV 中。

这就是我要实现的:

取而代之的是按钮:

我已经尝试过 margin ，但没有做任何事情。我也不需要它处于绝对位置，因为当我滚动时它会越过导航栏。

HTML:

<ul id="nav">
  <li><a><img src="images/button1.png"></a></li>
  <li><a><img src="images/button2.png"></a></li>
  <li><a><img src="images/button3.png"></a></li>
  <li><a><img src="images/button4.png"></a></li>
  <li><a><img src="images/button5.png"></a></li>
  <li><a><img src="images/button6.png"></a></li>  
</ul>

<div class="back1">
  <div class="returnbutton">
  </div>
</div>

CSS:

#nav {
  list-style: none;
  position: fixed;
  margin-top: -8px;
  margin-left: -10px;
  padding-left: -5px;
  width: 100%;
  background-image: url("images/rep.png");
  text-align: center;
  height: 47px;
}

#nav li {
  display: inline-block;
  text-align: center;
}

#nav img {
  height: 47px;
}

.back1 {
  height: 550px;
  margin-left: -10px;
  margin-right: -8px;
  background-image: url("images/galleryback1.png");
  background-repeat: no-repeat;
  background-color: #c4c5c6;
  background-position: center;
}

.returnbutton {
  height: 50px;
  width: 200px;
  background-color: orange;
}

Answer 1

可以设置div.returnbutton {position: absolute;}和#nav {z-index: 99;}。

需要 z-index 声明来将导航栏置于所有位置之上。所以你必须将它设置得比其他默认为 0 的 z-index 多。

希望对你有帮助。