React JS中Div重叠问题求助：z-index无效，请求CSS排查

核心原因分析 #

你的下拉菜单z-index不生效，本质是堆叠上下文的限制：z-index的优先级只在当前堆叠上下文内有效，如果下拉菜单的父元素没有创建独立的堆叠上下文，或者消息组件所在的容器有更高层级的堆叠上下文，下拉菜单的z-index就无法覆盖消息组件。

具体排查与修复步骤 #

1. 给下拉菜单父容器添加定位，创建独立堆叠上下文

你的.dropdown-container默认是static定位（默认值），导致下拉菜单的absolute定位会相对于页面或最近的非static父元素，同时无法形成独立的堆叠上下文。修改代码如下：

/* 新增.dropdown-container的定位 */
.dropdown-container {
  position: relative;
  outline: none;
}

.dropdownnew {
  position: absolute;
  right: 0px;
  background-color: white;
  outline: none;
  opacity: 0;
  border: 1px solid #00000008;
  z-index: 1; /* 初始层级设为1，避免被默认元素覆盖 */
  max-height: 0;
  min-width: 150px;
}

.dropdown-container:focus .dropdownnew {
  opacity: 1;
  z-index: 10; /* 设为明显高于消息组件的层级 */
  max-height: 100vh;
}

2. 检查消息组件的父容器堆叠层级

如果消息列表的容器（比如包裹所有.message-orange的父div）设置了position: relative且z-index值≥10，或者有transform/opacity<1/filter等会创建堆叠上下文的属性，下拉菜单的z-index会被压制：

• 确保消息容器的z-index小于下拉菜单的10（比如设为5）
• 移除消息容器上不必要的堆叠上下文属性（比如无意义的transform）

3. 验证消息组件本身的样式

你的.message-orange设置了position: relative但未指定z-index，默认是auto，不会创建堆叠上下文，所以这部分无需修改。如果后续给它添加z-index，要确保数值低于下拉菜单focus状态的层级。

关键知识点 #

• z-index仅对position: relative/absolute/fixed/sticky的元素生效
• 每个堆叠上下文是独立的层级体系，子元素的z-index无法突破父元素的堆叠层级
• 除了z-index，transform/opacity<1/filter/overflow: hidden等属性也会自动创建堆叠上下文

内容的提问来源于stack exchange，提问作者Mr.Osama