如何堆叠带文本内容的<div>元素且不造成底层文本偏移？

数据老陈

2026-8-26

问题原因

你遇到的底层文本偏移，本质是正常文档流的排版规则导致的重排：

你当前的拖动逻辑是把拖拽的字母块作为普通子节点，插入到了目标文本div的正常文档流中
块级的字母div会在正常流中占据独立的行空间，直接把原本在div里的文本挤到下方，就出现了你看到的字母c下移的问题
只要插入的元素还在正常文档流里占位置，不管怎么调整margin、padding，都没法彻底避免文本被挤动。

实现方案

核心思路是让所有可拖拽堆叠的元素脱离正常文档流，不再挤占底层文本的排版空间，底层div的文本结构完全不被改动，自然不会出现位移。

具体实现步骤

给所有承载文本的底层div，或者包裹所有元素的外层容器设置position: relative，作为上层堆叠元素的定位上下文
所有可拖动的字母块设置position: absolute，通过top、left属性控制摆放位置，设置更高的z-index保证显示在文本上方
拖动逻辑里只需要修改字母块的top/left坐标值即可，不需要把字母块插入到底层文本div的内部子节点中；如果需要判断字母块堆叠在哪个文本块上方，通过坐标做碰撞检测即可，完全不改动底层div的DOM结构。

核心CSS代码参考

/* 外层容器，作为定位上下文 */
.wrap {
  position: relative;
  display: flex;
  gap: 20px;
}
/* 底层带文本的div */
.text-box {
  width: 80px;
  height: 80px;
  border: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* 可拖拽堆叠的字母块 */
.letter-block {
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  background: #fff;
  position: absolute; /* 核心：脱离文档流，不挤占文本空间 */
  z-index: 10; /* 保证显示在文本上层 */
  cursor: grab;
}