小屏幕下页面主体覆盖导航栏的布局问题求助

问题分析 #

当屏幕宽度小于550px时，展开的导航菜单使用fixed定位脱离了文档流，下方轮播组件不会自动下移；同时导航栏未设置层级，导致轮播覆盖菜单内容。

解决方案 #

通过调整导航栏定位方式、菜单定位规则及层级设置，实现菜单展开时自动推开轮播组件：

1. 提升导航栏层级：给导航栏设置高z-index，确保它始终在轮播组件上方。
2. 改用粘性定位：将.menu的position从fixed改为sticky，既保持顶部固定效果，又占据文档流空间，菜单展开时会自动撑开高度，推动下方main元素下移。
3. 调整移动端菜单定位：将.menu-nav的position从fixed改为absolute，相对于导航栏主区域定位，展开时成为导航栏的一部分，撑开整体高度。

修改后的代码 #

导航栏CSS修改

.menu {
    width: 100%;
    position: sticky; /* 替换fixed为sticky */
    background: var(--primary-color-grey);
    top: 0;
    left: 0;
    right: 0;
    z-index: 999; /* 设置层级，确保在轮播上方 */
}
    
.menu-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    position: relative; /* 添加相对定位，让子元素absolute以此为基准 */
}

/* 以下原有样式保持不变 */
.menu ul {
    list-style: none;
    display: flex;
    align-items: center;
}
    
.menu ul li a {
    display: flex;
    height: var(--menu-height);
    padding: 0 2rem;
    font-size: 1.8rem;
    color: white;
    position: relative;
    text-decoration: none;
    align-items: center;
}
    
.menu ul li a:hover {
    background: var(--primary-color);
}
    
#instagram-logo {
    height: 2.8rem;
}
    
.logo {
    height: var(--menu-height);
    display: flex;
    padding: 1rem;
}
    
.hamburguer {
    display: none;
    cursor: pointer;
}
    
.bar {
    display: block;
    width: 2.5rem;
    height: 0.3rem;
    margin: 0.5rem auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
}
    
@media (max-width: 550px) {
    
    .menu-nav {
        position: absolute; /* 替换fixed为absolute */
        top: 100%; /* 定位在导航栏主区域底部 */
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--primary-color-grey);
        width: 100%;
        text-align: center;
        max-height: 0; /* 添加最大高度，配合过渡 */
        overflow: hidden;
    }
    
    .menu-nav:not(.active) {
        visibility: hidden;
        opacity: 0;
    }
    
    .menu-nav.active {
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        visibility: visible;
        opacity: 1;
        max-height: 500px; /* 设置足够大的高度容纳菜单 */
    }
    
    .menu ul {
        display: block;
    }
    
    .menu ul li a {
        justify-content: center;
    }
    
    .hamburguer {
        display: block;
    }
    
    .hamburguer.active .bar:nth-child(2) {
        opacity: 0;
    }
 
    .hamburguer.active .bar:nth-child(1) {
        transform: translateY(0.8rem) rotate(45deg);
    }
  
    .hamburguer.active .bar:nth-child(3) {
        transform: translateY(-0.8rem) rotate(-45deg);
    }
}

补充说明 #

• sticky定位既保留了fixed的顶部固定特性，又不会脱离文档流，菜单展开时会自动撑开导航栏高度，推动轮播组件下移。
• .menu-nav改为absolute后，会紧贴导航栏主区域下方，展开时成为导航栏的一部分，避免脱离文档流导致的覆盖问题。
• 添加max-height和overflow:hidden，配合过渡效果让菜单展开/收起更流畅。

内容的提问来源于stack exchange，提问作者Go-At Solutions