调整显示尺寸或缩放页面时导航栏文字重叠且粘性吸附功能失效问题

• 固定尺寸限制导致内容溢出：你给导航栏设置了固定高度height:76px，导航选项<li>设置了固定width:10%，同时导航文字、内边距用了固定像素或相对字体的em单位，页面放大时字体会跟着变大，内容实际宽度超过了你分配的固定宽度和高度，就会出现偏移、重叠。
• 浮动布局稳定性差：你用float:left实现导航横向排列，浮动元素本身容易出现内容溢出时高度塌陷、错位的问题，放大后内容撑破容器时表现尤为明显。
• 定位属性冗余冲突：你给.container设置了粘性定位的同时，还给每个导航<li>也加了position:sticky属性，多余的定位规则会干扰正常布局；另外你把兼容前缀-webkit-sticky写在了标准position:sticky后面，会被标准属性覆盖，导致部分浏览器粘性效果失效。
• 你将position改成static后失去粘性效果是正常的：粘性吸附效果完全依赖position:sticky属性，改成static后元素回到普通文档流，自然不会固定在顶部，这个修改方向本身是错误的，问题和container的sticky定位无关。

1. 替换浮动布局为flex布局，适配性更强，无需处理浮动塌陷问题
2. 移除导航栏固定高度，改用上下内边距撑出高度，放大页面时高度会随内容自动适配
3. 移除导航项的固定宽度和冗余定位属性，让导航项宽度随内容自适应
4. 调整粘性定位属性顺序，确保兼容性

修改后的核心代码示例 #

/* 调整粘性定位顺序，兼容属性写在前面 */
.container{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #FACABC;
    z-index: 999; /* 提高层级避免被其他内容遮挡 */
}

.container nav{
    width: 100%;
    font-size: 48px;
    display: flex;
    justify-content: center; /* 水平居中导航内容，替代原来的padding-left:7em */
}

.container nav ul{
    width: 100%;
    max-width: 1200px; /* 可根据需要调整最大宽度，避免导航在大屏上过散 */
    margin: 0 auto;
    list-style-type: none;
    transition: all 0.5s ease;
    display: flex; /* 用flex实现横向排列，替代float */
    gap: 2rem; /* 控制导航项之间的间距，可根据需要调整 */
    padding: 1rem 0; /* 上下内边距撑出高度，替代原来的固定height:76px */
}

.container nav ul li{
    /* 移除原来的width:10%、float:left、position:sticky、top:0 */
    text-align: center;
    color: #987b74;
    font-size: 41px;
    font-weight: bold;
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative; /* 仅保留relative用于定位下拉菜单 */
}

/* 原来的a标签的padding-right:100px可以删掉，改用上面的gap控制间距更合理 */
.container nav a{
    text-align: center;
    text-decoration: none;
    color: #987b74;
}

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