CSS z-index层级异常：文本输入框被overlay遮罩层覆盖问题

快速修复思路 #

问题根源是堆叠上下文限制：你的#textInput被某个父元素创建的低层级堆叠上下文包裹了，导致它的z-index:10只在父上下文内生效，无法突破到外部覆盖z-index:6的遮罩层。而发送按钮没有被这种父上下文限制，所以z-index:7能正常压过遮罩。

具体修复步骤 #

1. 打开浏览器开发者工具（F12），选中#textInput元素
2. 往上遍历它的所有父元素，检查有没有父元素设置了以下属性（这些会触发新的堆叠上下文）：
   • position设为relative/absolute/fixed/sticky且z-index不是auto
   • 有transform/filter/perspective等非默认样式
   • 设了isolation: isolate
3. 找到这类父元素后，二选一修改：
   • 把父元素的z-index改成auto，取消堆叠上下文
   • 或者给父元素设置z-index:7及以上，让整个父上下文层级高于遮罩的z-index:6

代码示例（针对父元素问题） #

假设输入框的父元素是.input-wrap，之前的样式是：

.input-wrap {
  position: relative;
  z-index: 4; /* 这个设置创建了低层级堆叠上下文 */
}

修改成：

.input-wrap {
  position: relative;
  z-index: auto; /* 取消堆叠上下文，让输入框的z-index直接和遮罩比较 */
}
/* 或者 */
.input-wrap {
  position: relative;
  z-index: 7; /* 让父上下文层级高于遮罩，输入框自然也在上方 */
}

验证方法 #

修改后刷新页面，点击输入框触发focus状态，检查是否能正常显示在遮罩层上方；同时用开发者工具的Layers面板查看元素层级，确认输入框的堆叠层级确实高于遮罩。

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