Question

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

这是test site的所有页面。

HTML＆gt;

<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＆gt;

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一个300px的余量，因为它比你需要的要大得多。但是不要将它设置为像素！因为使用固定测量意味着只要一个视力正常的用户运行只有文本缩放（很多取决于他们的浏览器）看到页面，标题将重叠内容，隐藏它，所以撤消所有的辛苦工作！使用em单位。

你的例子中的菜单有5行，加上上面有一个空白行，下面还有两三行，所以对于标题允许9em（你根据你的最终标题实际有多高来选择值），并这样做：

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

现在，无论用户使用什么文字缩放，您内容的上边距都会相应增加，内容将始终位于标题下方。

Answer 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>

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

2 个答案: