fixed与relative定位元素的z-index层级问题求助

问题场景 #

主页面采用固定定位背景图，滚动时白色内容块会覆盖背景图，Navbar始终保持在主内容上方；但滚动到Footer区域时，需要Footer覆盖Navbar，当前设置的z-index未生效，Navbar仍显示在Footer上方。

已设置的z-index值：

#footer {
    z-index: 1000;
}

#navbar {
    z-index: 10;
}

核心原因 #

z-index的层级优先级依赖堆叠上下文：

• Navbar是fixed定位，直接属于body的堆叠上下文，z-index:10在此上下文中生效。
• Footer的父元素#scrollable_content设置了z-index:9，这会创建一个独立的堆叠上下文。Footer的z-index:1000仅在这个父级上下文内部有效，无法突破父层级去覆盖body上下文中的Navbar。

解决方案 #

移除#scrollable_content的z-index属性，使其不创建独立堆叠上下文，这样Footer的z-index就能和Navbar处于同一层级上下文进行比较：

修改后的#scrollable_content样式：

#scrollable_content {
    position: absolute;
    top: 100vh;
    right: 0;
    left: 0;
    width: 100vw;
    /* 移除z-index:9 */
}

完整修改后代码 #

CSS代码 #

html,body {
        margin: 0;
        padding: 0;
}

#body {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-image: url(https://i.redd.it/u6mkl0evh2521.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
}

#scrollable_content {
        position: absolute;
        top: 100vh;
        right: 0;
        left: 0;
        width: 100vw;
}

#scrollable_content #main_content {
        position: relative;
        width: 100vw;
        min-height: 100vh;
        background-color: #F4FFFF;
}

#navbar {
        display: flex;
        position: fixed;
        top: 22px;
        right: 3.5vw;
        left: 3.5vw;
        width: 93vw;
        height: 3rem;
        background-color: rgba(240, 254, 255, 0.3);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid #FFF5;
        border-radius: 20px;
        flex-flow: row nowrap;
        z-index: 10;
}

#footer {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: stretch;
        background-color: #09353E;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
        position: relative;
}

#footer>h1 { color: #4BBACD }

::-webkit-scrollbar {
        height: 5px;
        width: 5px;
}

::-webkit-scrollbar-track {
        background-color: #F4FFFF;
}

::-webkit-scrollbar-thumb {
        background-color: #ACE6EF;
        border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
        background-color: #09353E;
}

HTML代码 #

<html>
<body>

<main id="body"></main>
<article id="scrollable_content">
  <div id="main_content">
  
  <!-- content -->
  
  <h1>Main Content</h1>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis fugiat nesciunt dolor eos incidunt animi consequatur nemo blanditiis, fuga tempora asperiores ipsum reprehenderit eius sed maxime repellat hic impedit similique doloribus assumenda a! Esse, distinctio? Vel, labore. Pariatur at ex ipsum deserunt vero sunt tempora officiis, quas odio a eveniet quia non doloribus nobis assumenda nemo quibusdam mollitia culpa? Animi pariatur consectetur quisquam provident delectus soluta aliquam est, eveniet quas facere tenetur. Voluptatem accusantium adipisci quod consectetur id deserunt quo? Et similique aliquam molestias omnis? Vitae hic impedit quidem, molestias nostrum accusantium labore. Natus impedit nemo, veritatis alias accusamus culpa?  

  <br>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis fugiat nesciunt dolor eos incidunt animi consequatur nemo blanditiis, fuga tempora asperiores ipsum reprehenderit eius sed maxime repellat hic impedit similique doloribus assumenda a! Esse, distinctio? Vel, labore. Pariatur at ex ipsum deserunt vero sunt tempora officiis, quas odio a eveniet quia non doloribus nobis assumenda nemo quibusdam mollitia culpa? Animi pariatur consectetur quisquam provident delectus soluta aliquam est, eveniet quas facere tenetur. Voluptatem accusantium adipisci quod consectetur id deserunt quo? Et similique aliquam molestias omnis? Vitae hic impedit quidem, molestias nostrum accusantium labore. Natus impedit nemo, veritatis alias accusamus culpa? 
  
  <br>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis fugiat nesciunt dolor eos incidunt animi consequatur nemo blanditiis, fuga tempora asperiores ipsum reprehenderit eius sed maxime repellat hic impedit similique doloribus assumenda a! Esse, distinctio? Vel, labore. Pariatur at ex ipsum deserunt vero sunt tempora officiis, quas odio a eveniet quia non doloribus nobis assumenda nemo quibusdam mollitia culpa? Animi pariatur consectetur quisquam provident delectus soluta aliquam est, eveniet quas facere tenetur. Voluptatem accusantium adipisci quod consectetur id deserunt quo? Et similique aliquam molestias omnis? Vitae hic impedit quidem, molestias nostrum accusantium labore. Natus impedit nemo, veritatis alias accusamus culpa?  
  
  </div>
  
  <footer id="footer">
  
  <h1>Footer goes here</h1>
  
  </footer>
</article>
<nav id="navbar"></nav>

</body>
</html>

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