设置position:relative后内容div覆盖粘性导航栏的问题求助

我正在进行大学项目，需复刻网站。目前进展顺利，想要将页面内容分为左右两个div，因此给class为main-content的div设置position:relative，使其子元素left-content和right-content可通过position:absolute进行左右定位。但滚动页面时，main-content会覆盖顶部的粘性导航栏，我已尝试z-index等基础方法修复但无效；仅移除main-content的position:relative属性，div才会正常显示在导航栏下方。

测试代码 #

JavaScript #

/*Gestione della scrollata*/
window.addEventListener('scroll', function() {
    var navbar = document.querySelector('.bar');
    var newItem = document.createElement('li');
    newItem.innerHTML = '<a href="#">OW</a>';

    if (window.scrollY > 45) {
        if (!navbar.querySelector('#newItem')) {
            newItem.id = 'newItem';
            navbar.insertBefore(newItem, navbar.firstChild);
        }
    } else {
        var addedItem = document.getElementById('newItem');
        if (addedItem) {
            addedItem.parentNode.removeChild(addedItem);
        }
    }
});

CSS #

*{
    margin: 0;
    box-sizing: border-box;
    font-family:Lato, Helvetica, Arial, sans-serif;
}

.montserrat-h3 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.open-sans-p {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}

h3{
    margin-top:6px;
}
p{
    margin-top: 10px;
}

.title{
    background-color: rgb(247,148,30);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.title a{
     text-decoration: none;
     cursor: pointer;
     color: white;
     font-weight: 400;
 }
#support{
    height: auto;
    width: 130px;
    background-color: rgb(247,148,30);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor:pointer;
    transform-origin: bottom left;
    transform: rotate(-90deg);
    position: fixed;
    left: 100%;
    top: 50%;
    transition: 0.5s;
}
#support-white{
    color: white;
    text-decoration: none;
}
#support:hover{
    background-color: black;
    text-decoration: none;
}

#privacy{
    padding: 5px;
    position: fixed;
    top: 0;
    right: 0;
    height: auto;
    width:auto;
    background-color: rgb(54, 139, 214);
    border-radius: 0 0 3px 3px;
}
.fa-cog{
    color: white;
}

.Logo-conteiner {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.logo{
    width: 1020px;
    margin: 5px;
}
.sticky-nav{
    width: 100%;
    height: 23px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    overflow: visible;
}

.navbar{
    width: 1020px;
    background-color: white;
    z-index: 1000;
}

.navbar ul{
    list-style: none;
    padding: 0;
}
.navbar ul li {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 0;
    padding-right: 8px;
}
.navbar ul li a{
    font-family: 'Open Sans Condensed', sans-serif;
    color: black;
    text-decoration: none;
    font-weight: 700;
    margin: 4px;
    transition: 100ms;
}
#newItem{
    background-color: rgb(247,148,30);
    display: flex;
    justify-content: center;
    align-items: center;
}
#newItem a{
    color: white;
    padding:0;
    margin:0;
}
.navbar ul li a:hover {
    background-color: rgb(247,148,30);
    color: white;
    margin-bottom: 0;
    padding-bottom: 3px;
    padding-top: 3px;
}

.bar {
    display: flex;
    flex-wrap: nowrap;
}

.bar li {
    flex: 1;
    white-space: nowrap;
}
#hrOrange{
    border: 0.5px solid rgb(247,148,30);
}
#rettOrange{
    background-color: rgb(247,148,30);
    color: white;
    margin: auto;
    padding: 3px;
}

.item{
    padding: 0;
    margin:0;
    display: flex;
    justify-content: center;
}

.undercontent{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    height: 2000px;
}

.main-content{
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.left-content{
    width: calc(100%*(2/3));
    position: absolute;
    left: 0;
    top: 0;
}

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

<div class="title">
    <a href="#">BEST OF LOREM IPSUM</a>
    <div id="privacy">
        <i class="fas fa-cog"></i>
        <a href="#">Lorem Ipsum</a>
    </div>
</div>

<div id="support">
    <a href="#" id="support-white">Lorem Ipsum</a>
</div>

<div class="Logo-conteiner">
    <div class="logo">
        <a href="#"><img src="https://placehold.co/230x97"></a>
    </div>
</div>
<div class="sticky-nav">
    <div class="navbar">
       <ul class="bar open-sans-p">
           <li>
                <a href="#" id="prim">Lorem Ipsum</a>
            </li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#"><div id="rettOrange">Lorem Ipsum</div></a></li>
            <li><div class="item"><a href="#"><i class="fas fa-user"></i></a></div></li>
            <li><div class="item"><a href="#"><i class="fas fa-search"></i></a></div></li>
        </ul>
        <hr id="hrOrange">
    </div>
</div>
<div class="undercontent">
    <div class="main-content">
        <div class="left-content">
            <img src="https://placehold.co/644x361">
        </div>
        <div class="right-content"></div>
    </div>
</div>

解决方案 #

问题核心 #

你给.navbar设置了z-index:1000，但它的父元素.sticky-nav没有设置z-index，导致.navbar的堆叠上下文只在.sticky-nav内部生效。而main-content设置position:relative后创建了新的堆叠上下文，层级上会覆盖未正确设置层级的粘性导航栏。另外，.sticky-nav没有背景色，即使层级正确，下层内容也会透过显示。

修复步骤 #

1. 调整粘性导航栏的层级和背景：
   把z-index移到.sticky-nav上，并添加背景色确保不透明：

   .sticky-nav{
       width: 100%;
       height: 23px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: sticky;
       top: 0;
       overflow: visible;
       z-index: 1000;
       background-color: white;
   }
   

2. 移除.navbar的冗余z-index：

   .navbar{
       width: 1020px;
       background-color: white;
       /* z-index: 1000; 移除这一行 */
   }
   

更优布局方案（替代绝对定位） #

如果只是实现左右分栏，推荐用Flexbox替代绝对定位，避免堆叠上下文问题：

.main-content{
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
    /* position:relative; 移除 */
    display: flex;
    gap: 20px; /* 可选，添加栏间距 */
}

.left-content{
    width: calc(100%*(2/3));
    /* position:absolute; left:0; top:0; 移除 */
}

.right-content{
    width: calc(100%*(1/3)); /* 补充右栏宽度 */
}

这种方式布局更稳定，无需依赖定位，也不会出现覆盖问题。

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