html - 重叠粘性标题的问题(重叠其下方的主要内容)

Question

我在过去几天学习了各种教程，但当我的页面垂直滚动时，(粘性)标题与下面的内容重叠时遇到了困难。

它在这个 test site 的所有页面上.

---

HTML >

<header>
  <div id="nav">
    <ul>
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="collection.html" title="Collection">Collection</a></li>
      <li><a href="shop.html" title="Shop">Shop</a></li>
      <li><a href="faq-policies.html" title="Frequently asked questions and policies">FAQ/Policies</a></li>
      <li><a href="contact.php" title="Contact">Contact</a></li>
    </ul>
    </li>
    </ul>
    <br class="clearboth"/>
  </div>
</header>
<br>
<div class="table">

CSS >

header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: fixed;
    z-index: 10;
}

.table {
    margin-left: 75px;
    text-decoration: none;
    margin-top:300px;
}

Answer 1

实际上，您的代码几乎已经完成了。你只需要给标题一个背景颜色，默认情况下它是透明的，并且宽度为 100%。然后滚动内容将消失在它后面。

还最好通过将主体边距和填充设置为零来整理它。所以将它添加到您的 CSS 中:

body{
    margin: 0;
    padding: 0;
}

header {
    background: white;
    width: 100%;
}

这将实现您最初想要的。然而，现在出现了大多数人忽略的有趣的一点。我不太确定为什么要给表格 div 留出 300 像素的边距，因为这比您需要的要大得多。但是根本不要以像素为单位设置它!因为使用固定测量意味着一旦使用纯文本缩放(很大程度上取决于他们的浏览器)的部分视力用户看到页面，标题就会与内容重叠，将其隐藏，因此您的所有努力都将付诸东流!使用 em 单位。

您的示例中的菜单有 5 行，加上上面有一个空行，下面还有两三行，因此标题总共允许 9em(您根据最终标题的实际高度选择该值)，并这样做:

.table {
    margin-top: 9em;   /* instead of 300px */
}

现在，无论用户使用何种文本缩放，您的内容的上边距都会相应增加，并且内容始终会从标题下方开始。