如何实现div标签元素相互叠放 达成网格方块重叠效果

核心实现逻辑 #

要实现行与行之间的方块重叠效果，完全不需要把现有网格改成绝对定位的复杂结构，仅通过两项基础CSS调整就能达成目标：

• 用负外边距压缩行与行的垂直间距，直接在原有流式布局里制造重叠空间
• 给行元素开启定位属性，通过z-index明确叠放的先后顺序，避免出现层级错乱

具体调整步骤 #

• 先修正原有代码的语法问题：原CSS中.cell的闭合大括号位置错误，先调整到正确位置，保证基础网格能正常渲染。
• 改造.row的边距规则：把原本分隔上下行的正向下外边距，替换为负向下外边距，让后续的行整体向上偏移，进入上一行的垂直占据范围，从布局层面形成重叠的基础。
• 给每个.row添加position: relative属性，让原本不生效的z-index层级控制可以正常工作。
• 按照行的从上到下的DOM顺序，给越靠下的行设置越高的z-index值，保证下一行的方块会稳稳叠在上一行方块的顶部，形成连续的重叠效果。

调整后的完整代码 #

HTML 结构 #

<div className="row">
  <div className="cell"></div>
  <div className="cell"></div>
  <div className="cell"></div>
</div>
<div className="row">
  <div className="cell"></div>
  <div className="cell"></div>
  <div className="cell"></div>
</div>
<div className="row">
  <div className="cell"></div>
  <div className="cell"></div>
  <div className="cell"></div>
</div>

CSS 样式 #

.row {
  height: 50px;
  /* 上下侧保留10px外边距，下侧设置-10px负边距，制造10px的上下行重叠空间 */
  margin: 10px 10px -10px 10px;
  /* 开启相对定位，激活z-index属性 */
  position: relative;
}

/* 按行的DOM顺序递增层级，越靠下的行层级越高 */
.row:nth-of-type(1) { z-index: 1; }
.row:nth-of-type(2) { z-index: 2; }
.row:nth-of-type(3) { z-index: 3; }

.cell {
  width: 50px;
  height: 50px;
  outline: 1px solid rgb(134, 154, 189);
  display: inline-block;
  background-color: seagreen;
  margin: 5px;
}

灵活调整说明 #

• 想要修改重叠的厚度，直接调整.row的负向下外边距数值即可：数值的绝对值越大，上下行方块重叠的区域越宽；绝对值越小，重叠区域越窄，不需要改动其他布局结构。
• 如果网格行数较多，不想逐行手写每个z-index值，可以通过CSS计数器或者JS遍历DOM的方式，按照行的索引值自动递增z-index数值，减少重复代码。

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