重疊粘性標題的問題（與其下面的主要內容重疊）

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 */ 
} 

現在，無論文字縮放用戶使用，你的內容的上邊距隨之增長，而內容將始終啓動就在標題下方。