重叠粘性标题的问题（重叠其下方的主要内容）答案

【问题标题】：Problems with overlapping sticky header (overlaps main content below it)重叠粘性标题的问题（重叠其下方的主要内容）
【发布时间】：2014-10-03 18:28:23
【问题描述】：

过去几天我学习了各种教程，当我的页面垂直滚动时，我遇到了（粘性）标题与下面的内容重叠的问题。

它在这个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;
}

【问题讨论】：

只需将padding-top 添加到.table div 中，即可将其向下推到足够远的位置。
添加一个简短的警告可能是礼貌的，说明您正在链接到一个包含穿着内衣的人的照片的页面。虽然没有冒犯性，但我宁愿在工作时不打开它。
我找不到模特的联系电话。
此外，根本不要链接到实时站点，这在问题解决后将不再相关。而是在小提琴中举一个问题的例子
如果您不希望它与您的内容重叠，则不应将 fixed 用于您的标题。只需使用内容滚动而不是整个页面来使您的 table-div 滚动，这样您的标题将始终位于您的内容之上（将名称命名为 div .table 顺便说一句，将其命名为 .content 或其他名称是一个可怕的想法）跨度>

标签： html css overlap sticky

【解决方案1】：

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

最好通过将正文边距和填充设置为零来整理它。所以把它添加到你的 CSS 中：

body{
    margin: 0;
    padding: 0;
}

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

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

您的示例中的菜单有 5 行，加上上面有一个空白行，下面还有两到三行，所以标题总共允许 9em（您根据最终标题的实际高度选择值），并这样做：

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

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

【讨论】：

谢谢家伙，我需要尽快完成您的解决方案！非常感谢所有花时间发表评论的人 - 周末愉快！

【解决方案2】：

将下面的 css 添加到您的顶级标题类中：

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>

【讨论】：