Atlaskit React中DropdownItem下拉显示在App Bar下方如何解决

问题描述 #

使用Atlaskit ReactJs Library开发时，DropdownItem渲染的下拉选项列表层级低于页面App Bar（应用栏），下拉内容始终显示在应用栏下方，被遮挡后无法正常交互，原有实现代码如下：

<DropdownMenu trigger="User Base" >
  <DropdownItemRadioGroup id="user_base">
    <DropdownItemRadio
      id="Total Base" defaultSelected
    >
      Total Base
    </DropdownItemRadio>
    <DropdownItemRadio
      id="APP User"
    >
      App User
    </DropdownItemRadio>
    <DropdownItemRadio
      id="USSD User"
    >
      USSD User
    </DropdownItemRadio>
    <DropdownItemRadio
      id="EC Verified"
    >
      EC Verified
    </DropdownItemRadio>
    <DropdownItemRadio
      id="new-user"
    >
      New User
    </DropdownItemRadio>
    <DropdownItemRadio
      id="Self Registration"
    >
      Self Registration
    </DropdownItemRadio>
    <DropdownItemRadio
      id="monthly-active"
    >
      Monthly Active
    </DropdownItemRadio>
  </DropdownItemRadioGroup>
</DropdownMenu>

解决步骤 #

问题本质是层叠上下文优先级冲突，固定定位的App Bar默认z-index高于当前挂载位置的下拉层，按以下顺序配置即可：

• 优先给DropdownMenu组件传入zIndex属性，设置大于项目中App Bar的z-index值即可。Atlaskit官方App Bar组件默认z-index为800，直接设为1100可覆盖绝大多数场景：

<DropdownMenu 
  trigger="User Base"
  zIndex={1100}
>
  {/* 原有下拉选项代码保持不变 */}
</DropdownMenu>

• 如果配置zIndex后仍被遮挡，检查DropdownMenu的父级容器是否存在overflow: hidden、transform、filter这类会创建独立层叠上下文的属性，此时给组件加shouldRenderToParent={false}配置，让下拉弹层默认挂载到document.body节点下，脱离父容器的层叠限制：

<DropdownMenu 
  trigger="User Base"
  zIndex={1100}
  shouldRenderToParent={false}
>
  {/* 原有下拉选项代码保持不变 */}
</DropdownMenu>

注意事项 #

• 不要通过全局CSS强制修改下拉层的z-index，优先使用组件官方暴露的属性，避免样式污染其他弹层类组件
• 如果项目自定义了App Bar的z-index，把DropdownMenu的zIndex设置为比自定义值高100~200即可，不需要设过大的数值避免影响其他弹窗组件

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