设置z-index后带按钮的Div仍被隐藏的问题排查

这个问题的核心是对CSS 层叠上下文规则、z-index生效逻辑的认知偏差，具体原因有两点：

• 你给父级div设置了position: relative + 非auto值的z-index: 1000，这行代码会让这个div生成一个完全独立的层叠上下文。它内部的所有子元素——包括::after伪元素——的z-index都只会在这个独立上下文内部比较大小，根本不会和父div本身的z-index值做对比。你以为伪元素z-index=999比父div的1000小就会跑到父元素下面，这个逻辑在父元素生成独立层叠上下文的前提下完全不成立。
• 内部元素层叠优先级差：div::after是绝对定位元素，还设置了z-index:999，属于当前层叠上下文里优先级最高的正z-index定位元素梯队；但div里的<button>是默认静态定位元素，没有设置任何position属性，z-index规则对静态元素完全不生效，它的层叠优先级比带正z-index的定位元素低很多，所以红色的伪元素块直接盖在了按钮上方，把按钮挡住了。

选任意一种方案都能解决问题：

• 方案1：取消父div的独立层叠上下文，把伪元素放到内容层下方

div{
  color: yellow;
  position: relative;
  /* 删除z-index: 1000，避免触发生成独立层叠上下文 */
}

div:after{
  content: '';
  background: red;
  padding: 100px;
  position: absolute;
  left: 0;
  z-index: -1; /* 负z-index会自动放在正常流内容的下方 */
}

• 方案2：给按钮设置定位，拉高它的层叠优先级

div button {
  position: relative;
  z-index: 1000; /* 比伪元素的999高，就会显示在伪元素上方 */
}

附原问题涉及的完整测试代码

function myFunction() {
  console.log('Clicked')
}

div{
  color: yellow;
  position: relative;
  z-index: 1000;
}

div:after{
  content: '';
  background: red;
  padding: 100px;
  position: absolute;
  left: 0;
  z-index: 999;
}

<div>
<button onclick="myFunction()">Click me</button>
</div>

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