如何利用position和z-index实现下拉菜单收起时隐藏于导航栏下方？

问题场景 #

点击导航栏按钮时，希望通过position和z-index将下拉菜单隐藏到导航栏下方，已实现菜单向上移动的动画，但设置下拉菜单z-index: -2、导航栏z-index: 1后，下拉菜单并未被导航栏覆盖，无法隐藏。

原因分析 #

.navBar设置了position: relative，这会创建一个堆叠上下文。在这个上下文里，所有子元素的z-index仅在父元素的堆叠上下文内部排序——哪怕子元素z-index设得再低，也只会处于父元素背景层的上方，不会被父元素的背景覆盖，所以导航栏没法挡住自己的子元素（下拉菜单）。

解决方案 #

方案1：调整DOM结构，将下拉菜单与导航栏设为同级

把下拉菜单从导航栏的DOM结构中移出，让两者处于同一层级，这样它们的堆叠上下文属于同一级别，z-index就能正常生效：

1. 修改DOM结构：

<!-- 导航栏 -->
<div className="navBar">
  <!-- 导航栏内容（按钮、logo等） -->
</div>
<!-- 下拉菜单 -->
<div className="profileDropDown" style={{ top: height }}>
  <!-- 下拉菜单内容 -->
</div>

2. 调整下拉菜单的CSS定位：

.profileDropDown{
    position: absolute;
    width: 186px;
    height: 140px;
    background-color: white;
    right: 15%; /* 和导航栏width的calc(100% -15%)对应，保证右侧对齐 */
    top: 80px; /* 初始位置在导航栏下方（导航栏高度为80px） */
    transition: 0.5s;
    z-index: -2;
    border-bottom: 1px solid rgb(190, 190, 190);
}

3. 调整JS切换逻辑（适配top值）：

const toggle = () => {
    if (height === '0px') {
      setHeight('80px')
    } else if (height === '80px') {
      setHeight('0px')
    }
}

切换时，下拉菜单会向上移动到导航栏位置，因z-index: -2低于导航栏的z-index: 1，会被完全覆盖。

方案2：给导航栏添加伪元素覆盖下拉菜单

如果不想修改DOM结构，可以给导航栏添加一个和自身尺寸、背景一致的伪元素，让伪元素的z-index介于导航栏内容和下拉菜单之间：

修改.navBar的CSS：

.navBar{
    padding-left: 20px;
    height: 80px;
    float: left;
    width: calc(100% - 15%) ;
    display: flex;
    align-items: center;
    background-color: rgb(197, 18, 18);
    position: relative;
    z-index: 1;
}
/* 添加伪元素 */
.navBar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(197, 18, 18); /* 和导航栏背景色保持一致 */
    z-index: 0; /* 高于下拉菜单的-2，低于导航栏内容的层级 */
}

伪元素会在导航栏的堆叠上下文里覆盖下拉菜单，实现隐藏效果，同时不会遮挡导航栏内容（若导航栏内元素层级不够，可单独给它们设置z-index: 2）。

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