CSS z-index设置失效 如何让连接线显示在加载条div下层

问题原因 #

你设置的z-index未生效是因为父容器.space-between-lb-features没有创建独立层叠上下文，导致设置了z-index: -1的连接线被排到了父容器层级的下方，被页面背景覆盖无法显示。同时连接线的垂直位置设置错误，没有对齐两个元素的中心水平线。

解决方案 #

按以下步骤修改代码即可实现需求：

1. 给父容器添加isolation: isolate属性，创建独立层叠上下文，让子元素的z-index仅在容器内部做层级比较
2. 调整连接线的垂直定位参数，使其对齐加载条和圆形元素的中心

修改后的核心代码如下：

/* 父容器新增isolation属性 */
.space-between-lb-features {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 600px;
  isolation: isolate;
}

/* 调整连接线样式 */
.line-connector {
  position: absolute;
  width: 100%;
  height: 0;
  top: 50%;
  transform: translateY(-50%);
  border-bottom: 2px solid #ACACA6;
  z-index: -1;
}

修改后连接线会正常显示在加载条下方，同时水平对齐两个元素的中心，符合预期效果。原代码中.progress设置的z-index: 1可以保留，保证加载条层级高于连接线。

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