如何修复页面顶部文本链接点击后移位遮挡问题？

核心问题分析 #

你的问题根源有两点：

• 顶部的.fixed-row未设置position: fixed，导致top: 0完全无效，它只是普通文档流元素，会被下方的sticky header挤走。
• 锚点跳转的默认行为会让目标元素贴合视口顶部，而sticky的.header会粘在视口顶部，直接覆盖上方的.fixed-row。

具体修复步骤 #

1. 固定顶部导航栏
   给.fixed-row添加position: fixed，确保它始终停在视口最顶端，同时把z-index设得比header更高，避免被遮挡：

.fixed-row {
    position: fixed; /* 新增核心定位属性 */
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px;
    z-index: 10001; /* 优先级高于header */
}

2. 调整Sticky Header的定位位置
   把.header的top值改成.fixed-row的高度（这里按padding+内容高度估算为40px），让它粘在顶部导航栏下方，不会覆盖：

.header {
    position: sticky;
    top: 40px; /* 与fixed-row高度匹配 */
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px;
    z-index: 10000;
    text-align: center;
    margin-top: 40px; /* 给文档流留出fixed-row的空间，避免页面初始内容被覆盖 */
}

3. 修复锚点跳转的偏移问题
   锚点跳转默认会让目标元素顶到视口，现在顶部有两个固定/粘性元素，给所有锚点目标元素加上scroll-margin-top，确保跳转后内容不会被顶部栏遮挡：

/* 匹配所有以text开头的锚点ID */
[id^="text"] {
    scroll-margin-top: 120px; /* 值为fixed-row高度 + header总高度，保证内容可见 */
}

修改后的完整代码示例 #

<style>
/* 顶部固定导航栏样式 */
.fixed-row {
    position: fixed;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px;
    z-index: 10001;
}

.fixed-row a {
    margin-right: 20px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

/* Sticky三行链接样式 */
.header {
    position: sticky;
    top: 40px;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px;
    z-index: 10000;
    text-align: center;
    margin-top: 40px;
}

.header-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* 锚点目标偏移设置 */
[id^="text"] {
    scroll-margin-top: 120px;
}
</style>

<!-- 顶部固定导航栏 -->
<div class="fixed-row">
    <a href="index.html">Page One</a>
    <a href="two.html">Page Two</a>
    <a href="three.html">Page Three</a>
    <a href="main/four.html">Page Four</a>
</div>

<!-- Sticky三行链接 -->
<div class="header">
    <div class="header-row">
        <a href="#text1">One</a>
        <a href="#text2">Two</a>
        <a href="#text3">Three</a>
        <a href="#text4">Four</a>
    </div>
    <div class="header-row">
        <a href="#text5">Five</a>
        <a href="#text6">Six</a>
        <a href="#text7">Seven</a>
        <a href="#text8">Eight</a>
    </div>
    <div class="header-row">
        <a href="#top">Return to table of contents</a>
    </div>
</div>

<!-- 示例锚点内容 -->
<div id="text1" style="margin-top: 200px;">Text 1 Content</div>
<div id="text2" style="margin-top: 200px;">Text 2 Content</div>
<!-- 更多锚点内容可按此格式添加 -->

内容的提问来源于stack exchange，提问作者Peter Grad