fixed父元素内子元素z-index堆叠失效问题求助

问题描述 #

尝试用z-index控制元素堆叠，但fixed定位的父元素下两个子元素完全不遵循预期的z-index规则：

• 父元素样式：

position: fixed;
z-index: 800;

• 第一个子元素（.list-group）样式：

position: relative;
z-index: -1;

• 第二个子元素（.support-bubble>div）样式：

position:relative;
z-index: 2;

实际显示中，第一个子元素的后代反而出现在第二个子元素的后代上方。

曾尝试给第一个子元素的所有后代设置z-index: -1，给第二个子元素的所有后代设置z-index: 400，但问题依旧。

完整代码示例 #

CSS

.support-bubble {
  z-index: 800;
  position: fixed;
  bottom: 25px;
  right: 30px;
  border: none;
  cursor: default !important;
  font-size: 60px;
}

.support-bubble>div {
  position: relative;
  z-index: 2;
}

.support-bubble .list-group {
  position: relative;
  z-index: -1;
  cursor: default;
  opacity: 0;
  max-height: 0;
  transition: opacity 0s linear 0.35s, max-height 0s linear 0.35s;
}

.support-bubble:focus-within .list-group {
  transition: none;
  opacity: 1;
  max-height: 300px;
}

.support-bubble .list-group-item {
  position: relative;
  cursor: pointer;
  opacity: 0;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  margin: auto;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity));
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
  outline: 1px solid rgb(var(--bs-danger-rgb));
  transition: opacity 0s linear 0.35s, max-height 0s linear 0.35s;
}

.support-bubble .list-group-item::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  opacity: 0;
  content: '';
  box-shadow: 0 0 8px rgb(var(--bs-danger-rgb));
  transition: opacity 0.3s ease;
}

.support-bubble .list-group-item:hover::after {
  opacity: 1;
}

.support-bubble:focus-within .list-group-item {
  opacity: 1;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<button class="btn support-bubble">
  <ul class="list-group gap-3 gap-md-2 mb-3 mb-md-2">
    <li class="list-group-item" data-bs-placement="left" data-bs-toggle="tooltip" data-bs-title="AI Whatsapp Assistant">
      <i class="fa-regular fa-robot"></i>
    </li>
    <li class="list-group-item" data-bs-placement="left" data-bs-toggle="tooltip" data-bs-title="Whatsapp Support">
      <i class="fa-brands fa-whatsapp fa-lg"></i>
    </li>
    <li class="list-group-item" data-bs-placement="left" data-bs-toggle="tooltip" data-bs-title="Live-chat Interface">
      <i class="fa-regular fa-comments"></i>
    </li>
  </ul>

  <div class="animate__animated animate__pulse animate__infinite">
    <i class="fa-duotone fa-solid fa-circle-info" style="--fa-primary-color: #38501f; --fa-secondary-color: #38501f;"></i>
  </div>
</button>

问题原因 #

1. 堆叠上下文规则冲突：父元素设置position: fixed+z-index后创建独立堆叠上下文，子元素.list-group的z-index: -1会让它被放置到父元素堆叠上下文的底层，但父元素无背景，导致它的视觉层级出现混淆。
2. 布局流影响：.list-group作为块级元素默认排列在.support-bubble>div上方，展开后自然覆盖父元素上部区域，视觉上造成“z-index失效”的错觉。

解决方案 #

调整定位方式，让右下角图标脱离文档流并固定位置，同时修正堆叠层级：

.support-bubble {
  z-index: 800;
  position: fixed;
  bottom: 25px;
  right: 30px;
  border: none;
  cursor: default !important;
  font-size: 60px;
  /* 明确作为绝对定位子元素的容器 */
  position: relative;
}

.support-bubble>div {
  /* 改为绝对定位，固定在父元素右下角 */
  position: absolute;
  bottom: 0;
  right: 0;
  /* 保持高于列表的堆叠层级 */
  z-index: 2;
}

.support-bubble .list-group {
  position: relative;
  /* 移除负值z-index，避免堆叠上下文异常 */
  /* z-index: -1; */
  cursor: default;
  opacity: 0;
  max-height: 0;
  transition: opacity 0s linear 0.35s, max-height 0s linear 0.35s;
}

修改后，右下角图标会固定在父元素右下角，不会被展开的列表覆盖，同时列表的展开动画正常生效。

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