如何为position:absolute定位的导航项设置间距避免重叠

你为每一个.nav-item单独设置了position: absolute，所有导航项直接脱离正常文档流，且统一配置了top: 0; right: 10px的定位规则，相当于强制把所有导航项都放到了距离视口顶部0、距离视口右侧10px的同一坐标上，必然出现重叠。另外你提到要开发左上角导航，但当前配置的right: 10px是右上角对齐规则，和预期位置不符。

绝对定位不要加在单个导航项上，移到父级<nav>容器上即可，完全可以满足“不挤压页面内容”的需求：

• 父容器nav设置position: absolute后会脱离普通文档流，自身不占据页面布局高度，不会把下方内容往下挤
• 导航项作为nav的子元素，在容器内部用flex正常横向排列，不会出现重叠问题

修正后代码 #

CSS 样式 #

nav {
    position: absolute;
    top: 0;
    /* 左上角导航配置left，右上角就换为right: 10px，按实际需求调整 */
    left: 10px;
    display: flex;
    gap: 24px; /* 控制两个导航项的间距，数值可按需修改 */
}
.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* 控制单个导航项内图标和文字的间距 */
}
.nav-item:hover p {
    color: #909590;
}

HTML 结构 #

原有HTML结构不需要调整，直接保留即可：

<nav>
    <a href="index.html">
        <section class="nav-item">
            <img src="assets/home.svg" alt="home">
            <p>Home</p>
        </section>
    </a>
    <a href="commissions.html">
        <section class="nav-item">
            <img src="assets/dollar-sign.svg" alt="dollar-sign">
            <p>Commissions</p>
        </section>
    </a>
</nav>

补充：如果需要导航固定在顶部、不随页面滚动偏移，把nav的position: absolute替换为position: fixed即可，其余布局逻辑不变。

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