Question

因此，我正在为一个学校项目制作网站，但直到我尝试放置一个段落元素，并且在背景颜色后面的标题文本上方显示该内容时，一切都是笨拙的

.container {
  width: 80%;
  margin: 0;
  padding: 0;
}

#logotext {
  float: left;
  font-family: 'Doppio One';
  margin-left: 25px;
}

nav {
  float: right;
}

#nav {
  list-style-type: none;
  text-decoration: none;
  margin-top: 35px;
}

ul li {
  display: inline;
}

li a {
  text-decoration: none;
  color: white;
}

li a:hover {
  color: #fc9516;
}

.darkwrap {
  background-color: #414a4c;
  position: fixed;
  overflow: hidden;
}

.active {
  color: #22cc25;
}

#clock {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 25px;
  margin-right: 25px;
  font-family: Rajdhani;
  font-size: 30px;
}

<div class="container darkwrap">
  <div id="logotext">
    <h1>JF Web Design</h1>
  </div>
  <!-- Navigation Bar -->
  <nav>
    <ul id="nav">
      <li><a href="TestIndex.html">&nbsp;Page 1&nbsp;</a></li>
      <li><a href="TestIndex2" class="active">&nbsp;About&nbsp;</a></li>
      <li><a href="">&nbsp;Page 3&nbsp;</a></li>
    </ul>
  </nav>

</div>

</header>

<span id="clock"></span>
<p>
  Hello
</p>

<footer></footer>

我使用chrome突出显示了有问题的元素，因此它清楚地显示了发生了什么，其字面量位于bg颜色后面的顶部 Console Highhlighted element

Answer 1

.darkwrap是position: fixed。

这会使它脱离正常流动，并锁定其相对于视口的位置。

其余内容按常规布局，就好像.darkwrap元素不存在一样……因此它最终被它掩盖了。

当视口滚动到顶部时，可以使用边距来补偿.darkwrap所覆盖的空间。我首先只是避免使用position: fixed：始终将菜单始终显示在屏幕上的好处远胜于一直使用所有垂直空间的缺点。

Answer 2

如果您使用float: left和float:right，请记住将clear:both添加到网站的下一个元素。这是固定代码：

https://codepen.io/anon/pen/jKRqLz

为什么我的段落元素显示在背景色后面

2 个答案: