时间戳

首页 > 解决方案 > 为什么我的段落元素显示在背景色后面

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

问题描述

所以我为一个学校项目制作了一个网站，在我尝试放入一个段落元素并显示在背景颜色后面的标题文本上方之前，一切都是笨拙的

.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 color Console Highhlighted元素 后面的顶部

标签： htmlcss

解决方案

.darkwrap是position: fixed。

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

其余内容的布局与该.darkwrap元素不存在一样正常……因此最终被它所掩盖。

您可以使用边距来补偿.darkwrap视口滚动到顶部时所覆盖的空间。我会一position: fixed开始就避免使用：一直在屏幕上显示菜单的好处很少超过一直用完所有垂直空间的缺点。

推荐阅读