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

Posted 2023-03-16

【中文标题】重叠粘性标题的问题（重叠其下方的主要内容）

【英文标题】：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 或其他名称是一个可怕的想法）跨度>

【参考方案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>