CSS 导航栏卡在 DIV 后面

Question

我一直试图在我的页面上获取多个背景图片，但我无法获取超过 2 个，所以我开始考虑我可以使用 div 代替。但是当我使用 div 时，我在屏幕的顶部和两侧留下了大约 5 个白色像素，直到我将位置更改为绝对但然后我的导航栏被卡在 div 后面......如果有人可以帮助我修复我的问题。

我的代码不是那么好，但这是我目前所拥有的:

#P1Tekstvlak1_1 {
  background-image: url("DakB1.jpg");
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}


/** — Navbar —*/

#nav {
  color: FFFFFF;
  opacity: 0.9;
}

#nav_wrapper {
  width: auto;
  margin: 0 auto;
  text-align: left;
}

#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: fixed;
  min-width: 200px;
  text-align: center;
  background-color: #B50B26;
}

#nav ul li {
  display: inline-block;
}

#nav ul li:hover {
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px #FFFFFF;
}

#nav ul li a,
visited {
  color: #FFFFFF;
  font-size: 20px;
  display: block;
  padding: 15px;
  text-decoration: none;
}

#nav ul li:hover ul {
  display: block;
}

<div id="nav">
  <div id="nav_wrapper">
    <ul>
      <li><a href="TDPD.html">Home</a></li>
      <li><a href="TDPD.html">Over</a></li>
      <li><a href="TDPD.html">Renovatie</a></li>
      <li><a href="TDPD.html">Nieuwbouw</a></li>
      <li><a href="TDPD.html">Vacatures</a></li>
      <li><a href="TDPD.html">WKA</a></li>
      <li><a href="TDPD.html">Contact</a></li>
    </ul>
  </div>
</div>

Answer 1

删除绝对定位，然后像 here 那样应用 CSS 重置.浏览器有一些样式属性，它默认应用于可访问性目的。你应该删除它们。我在开始构建任何 Web UI 之前执行此操作。

注意:相对于对元素应用布局，绝对定位会堆叠元素。这就是为什么您在 Assets 净值后面看到它的原因