AOS.js动画导致Bootstrap 5导航栏下拉菜单隐藏问题求助

问题描述 #

开发基于Drupal的网站，用Bootstrap 5构建导航菜单，引入AOS.js实现页面动画后，给元素添加data-aos="fade-up"/data-aos="fade-down"属性，导致Bootstrap下拉菜单明明在DOM中存在（开发者工具可查），却被后续内容覆盖。调整z-index属性无效，移除AOS动画后下拉菜单恢复正常，推测是transform-3d相关的堆叠上下文问题。

原代码片段：

<header id="header" data-aos="fade-down">... Bootstrap 5 nav menu with dropdown ...</header>
...
<div class="..." data-aos="fade-up">...</div>

问题根源 #

AOS.js的fade系列动画会给目标元素添加transform: translate3d()这类3D变换属性。根据CSS堆叠上下文规则：当元素设置了transform（非none）时，会创建新的堆叠上下文，子元素的z-index仅在该上下文内生效。

也就是说，带AOS动画的header形成了自己的堆叠上下文，下拉菜单作为其子元素，即使设置了很高的z-index，也无法突破这个上下文；而后续带data-aos="fade-up"的元素同样创建了独立的堆叠上下文，两者的z-index对比失效，导致下拉菜单被覆盖。

解决方案 #

方案1：修复父元素的堆叠上下文继承 #

给带AOS动画的header添加CSS属性，让子元素的堆叠上下文能正常向外延伸，同时确保下拉菜单的z-index足够高：

#header[data-aos] {
  transform-style: preserve-3d;
  perspective: 1000px;
}
/* 强制提升下拉菜单的层级 */
.dropdown-menu {
  z-index: 9999 !important;
}

方案2：禁用AOS的3D变换 #

初始化AOS时关闭3D变换功能，这样动画不会触发transform属性，也就不会创建额外的堆叠上下文（缺点是会失去3D动画的流畅度）：

AOS.init({
  useTransform: false
});

方案3：调整动画的作用范围 #

不给整个header加AOS动画，把动画绑定到header内部的子元素（比如logo、导航链接容器）上，让header本身不产生transform属性，下拉菜单的堆叠上下文不受影响：

<header id="header">
  <div class="nav-container" data-aos="fade-down">
    ... Bootstrap 5 nav menu with dropdown ...
  </div>
</header>
...
<div class="..." data-aos="fade-up">...</div>

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