为inline-block类型div设置z-index：如何让C、D复选标记置于竖线之上？

嘿，我来帮你搞定这个复选标记被竖线挡住的问题！你说设置z-index没生效，大概率是踩了z-index只对非static定位元素生效的坑——默认情况下元素的position是static，这时候z-index完全不起作用。

给你几个具体的解决思路：

• 第一步：给box_left和box_mid添加非static定位
  先给这两个容器加上position: relative，这是让z-index生效的核心前提，代码如下：

  .box_left, .box_mid {
    position: relative;
    /* 保留你原有样式不变 */
  }
  

• 第二步：设置足够高的z-index值
  给这两个容器设置比竖线元素更高的z-index数值，确保它们能覆盖在竖线上方：

  .box_left, .box_mid {
    position: relative;
    z-index: 10; /* 数值只要比竖线的z-index大就行，比如竖线可以设为1 */
  }
  

• 额外检查：竖线元素的层级
  如果竖线是用伪元素（比如::before/::after）或者单独元素实现的，要确保它的z-index数值比box_left和box_mid小，比如：

  /* 假设竖线的类是.vertical-line */
  .vertical-line {
    z-index: 1;
    /* 保留你原有样式不变 */
  }
  

另外补充个小细节：如果你的复选框是绝对定位的，它的层级是相对于最近的定位父元素（也就是box_left/box_mid），所以只要父容器的层级够高，复选框自然会跟着显示在竖线上方。

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