如何设置子元素z-index使其不会堆叠到父元素上方？

问题原因 #

你遇到的层级失效问题核心是堆叠上下文冲突：你的父元素.how__box同时设置了z-index: 1和小于1的opacity: .99，这两个属性都会触发创建独立的堆叠上下文。此时子元素.how__box__arrow的z-index: -1只能在当前父元素的内部堆叠层级中排序，无法突破父元素本身的层级，自然也就没法显示在其他.how__box的下方。

修复方案 #

1. 移除父元素.how__box上触发堆叠上下文的属性：删掉z-index: 1和opacity: .99，如果需要半透效果，可以把背景色改成rgba格式实现，不会触发堆叠上下文。
2. 给文本、图片元素单独设置层级，保证它们始终显示在连线的上方。
3. 保留连线的负z-index设置，此时因为父元素没有独立堆叠上下文，连线可以正常显示在父元素下方，同时被后续的.how__box自然覆盖。

修复后代码 #

HTML结构不需要改动，仅调整CSS即可：

.how__box
  position: relative
  min-height: 170px
  margin-bottom: 150px
  padding: 30px 40px
  display: flex
  justify-content: start
  align-items: center
  /* 用rgba实现和原opacity一致的半透效果，不触发堆叠上下文 */
  background-color: rgba(255,255,255,0.99)
  border-radius: 50px
  &:nth-child(even)
    margin-left: auto
    .how__box__text
      margin-right: 0px

/* 给文本和图片加相对定位和层级，保证显示在连线上方 */
.how__box__text, .how__box__img
  position: relative
  z-index: 1

.how__box__arrow
  position: absolute
  height: 300px
  bottom: -140%
  z-index: -1

原问题效果示意 #

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