重叠的固定页眉问题（覆盖在其下面的主要内容）

Question

最近几天我看了很多教程，但遇到一个问题：当我的网页垂直滚动时，（固定的）页眉会覆盖在其下面的内容。

这个问题出现在这个测试站点的所有页面上。

---

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;
}

- Will

---

只需在 .table div 中添加 padding-top，使其向下推动足够的距离以便能够看到它。 - Paulie_D

可能有礼貌的做法是添加一个简短的警告，说明你正在链接到一个包含人们穿着内衣照片的页面。虽然不会引起反感，但这是我在工作时宁愿不要打开的内容。 - Woodrow Barlow

我找不到该型号的联系电话。 - emerson.marini

此外，不要链接到实时网站，因为当问题解决后，该链接将不再相关。相反，在fiddle中提供问题的示例。 - andrew

如果您不希望标题与内容重叠，请勿使用 fixed。只需使包含内容的表格 div 滚动，而不是整个页面，这样您的标题将始终位于内容上方（顺便说一下，将 div 命名为 .table 是一个糟糕的想法，最好将其命名为 .content 或其他名称）。 - myfunkyside

谢谢大家 - 对于n00b错误感到抱歉，我还在逐渐熟悉这个网站！ - Will

Answer 1

将以下 CSS 添加到顶部 header 类中：

z-index: 99;

作为:

<header style="z-index:99">
  <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>

- Shubham Verma

Answer 2

实际上，你的代码已经接近完成了。你只需要给头部设置一个背景颜色，因为默认情况下是透明的，并且将宽度设置为100％，然后滚动内容就会消失在它的后面。

此外，最好通过将body的边距和填充设置为零来整理它。因此，请将以下内容添加到你的CSS中：

body{
    margin: 0;
    padding: 0;
}

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

那将最初实现您想要的内容。现在，然而，来了大多数人忽略的有趣部分。我不太确定为什么您给表格div设置了300像素的边距，因为那比您需要的大得多。但是根本不要使用像素来设置它！因为使用固定的度量单位意味着，一旦一个部分视力受损的用户运行只有文本缩放的页面（很大程度上取决于他们的浏览器），标题将重叠内容，隐藏它，从而撤销所有您的努力！使用em单位。

您的示例菜单有5个菜单项，加上上面的空白行和下面的两三行，所以总共允许9个em作为标题（您可以根据最终标题的高度选择值），并执行以下操作：

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

现在，无论用户使用什么文本缩放比例，您的内容顶部的边距都会相应增加，并且内容始终从标题下方开始。

- GuyH

---

谢谢你的解决方案，我需要尽快完成网站！非常感谢所有抽出时间评论的人 - 祝你们周末愉快！ - Will