CSS固定导航栏滚动层级问题求助：红色容器覆盖导航栏

我是网页设计新手，在以下代码中，向下滚动页面时，黄色边框容器表现正常（会在导航栏下方滚动），但红色边框容器会滚动到导航栏上方，恳请大家帮忙解决。
滚动页面时，黄色和红色边框容器都需要在fixed定位的导航栏下方，但红色边框容器滚动时会出现在导航栏上方。

代码示例 #

index.html #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Sofia&effect=fire|neon|3d|fire-animation|shadow-multiple|3d-float">
</head>

<body>
    <div class="h">
        <div class="nav">
            <img src="logo.png" alt="">
            <h1 class="title font-effect-shadow-multiple">CSS Page</h1>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        
    </div>
   <br>
   <div class="header1">
        
            <img src="black-g51b181fe3_1920.jpg" alt="">
            <div class="side"></div> 

          
      
    </div>

</div>
    
</body>


</html>

style.css #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Sofia;
}

.h {
    position: relative;
}

.nav {
    width: 100%;

   position: fixed;
    display: flex;
    background-color: aquamarine;
    
    height: 100px;
    box-shadow: 10px 10px 20px #1e1b249f;


}

.nav ul {
    /* position: relative; */
    font-size: 29px;
    margin-left: 65%;
    margin-top: 16px;
    float: right;
    justify-content: space-between;


}

li {
    list-style: none;
    padding: 10px;
    display: inline-block;

}

.nav ul li a {
    text-decoration: none;
    color: black;
}

.nav ul li:hover {
    text-decoration: underline;
    text-decoration-color: chartreuse;
}

.title {
    font-size: 33px;
    position: absolute;
    top: 23px;
    left: 43%;
    color: black;
}

.header1 {
    margin-top: 400px;
    top: 50px;
    border: 10px solid yellow;
    /* top: 104px; */
    position: static;
}

.header1 img {
    width: 100%;
    height: 800px;
}


.heading {


    bottom: 300px;
    left: 40px;
    color: antiquewhite;
    height: 200px;
    width: 300px;
}

.heading h1 {
    text-decoration: underline;
    text-decoration-color: aquamarine;
}

.side {
position: absolute;
    top: 550px;
    right: 20px;
    border: 20px solid red;
    width: 350px;
    height: 350px;
}

.side img {
    background-size: cover;
}

问题原因 #

1. 导航栏用了position: fixed但未设置z-index，红色边框的.side是绝对定位，滚动时层级会超过导航栏
2. .side的定位是相对于父元素.h（position: relative），而fixed导航栏脱离了文档流，所以滚动时.side会跑到导航栏上方

解决方法 #

方法一：给导航栏设置更高层级（最简单有效） #

在.nav的CSS中添加z-index: 999，让导航栏始终处于最上层：

.nav {
    width: 100%;
    position: fixed;
    display: flex;
    background-color: aquamarine;
    height: 100px;
    box-shadow: 10px 10px 20px #1e1b249f;
    z-index: 999; /* 添加这一行 */
}

方法二：调整.side的定位逻辑（可选） #

如果不想依赖z-index，可以让.side相对于黄色容器.header1定位，跟着容器一起滚动：

1. 给.header1添加position: relative
2. 修改.side的top值（根据需求调整）

.header1 {
    margin-top: 400px;
    border: 10px solid yellow;
    position: relative; /* 添加这一行 */
}

.side {
    position: absolute;
    top: 20px; /* 修改为相对于.header1的距离 */
    right: 20px;
    border: 20px solid red;
    width: 350px;
    height: 350px;
}

额外优化建议 #

• fixed导航栏会挡住页面内容，建议给body或.h添加padding-top: 100px（和导航栏高度一致），避免内容被遮挡
• .nav ul用margin-left: 65%在小屏幕上会挤在一起，建议换成flex布局实现右对齐，更适配响应式：

.nav ul {
    font-size: 29px;
    margin-top: 16px;
    margin-left: auto; /* 替换原margin-left:65% */
    display: flex;
    gap: 20px; /* 控制导航项间距 */
}

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