如何让双栏卡片区块置于背景上方？已尝试z-index无效

常见问题排查与修复 #

• z-index生效前提：元素必须非静态定位
  z-index只对position属性为relative/absolute/fixed/sticky的元素起作用。给你的卡片容器添加定位和层级：

  .card {
    position: relative;
    z-index: 1;
  }
  

  背景元素如果是独立层级，同样设置定位：

  .background {
    position: relative;
    z-index: 0;
  }
  

• 父容器的堆叠上下文限制
  如果卡片的父元素z-index低于背景所在的父容器层级，单独给卡片加z-index无效。此时需要调整父容器的z-index，确保卡片所在的父容器层级更高。

• 背景是父容器的背景图时的处理
  若背景是卡片父容器的background属性，卡片默认处于该容器内部。要让卡片“跳出”背景覆盖效果，可给卡片设置负边距或正边距让它超出父容器范围，同时确保父容器的overflow设为visible（默认值，若被修改需改回），再配合卡片的定位和z-index。

• 排除其他干扰因素
  检查是否有同级元素z-index高于卡片，或者元素设置了opacity < 1（会创建新的堆叠上下文，打乱层级），针对性调整这些属性即可。

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