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

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的边距为300px，因为这比你需要的大得多。但不要以像素为单位设置它！因为使用固定的测量意味着只要有视力不佳的用户使用纯文本缩放（很大程度上取决于他们的浏览器）看到页面，标题就会重叠内容，隐藏它，这样就可以消除您的所有努力！使用em单位。

你的例子中的菜单有5行，再加上上面的空白行和下面的两个或三个以上的字符，所以允许在所有的头文件中使用9em（你根据最终头文件的实际高度选择值） ，而做到这一点：

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

现在，无论文字缩放用户使用，你的内容的上边距随之增长，而内容将始终启动就在标题下方。