CSS设置resize: both后调整元素大小导致其他div移位如何解决

问题根因 #

你当前的布局中所有div都处于常规文档流或flex弹性布局内，元素的尺寸变化会直接影响相邻元素的排版位置，所以调整一个div的大小时其他元素会被挤动。直接加position: absolute会堆叠是因为没有给每个元素设置独立的初始left、top坐标。

实现方案 #

通过「初始布局定位转换+交互时提升层级」的方式即可实现需求，同时天然兼容后续的拖拽功能：

1. 页面加载时，先把所有.el元素从常规文档流转换为绝对定位，记录每个元素原来的坐标作为初始left、top值，保证初始位置和原布局一致不会堆叠
2. 给元素绑定操作触发事件，当前元素被操作时设置更高的z-index，保证缩放时覆盖其他元素

完整代码示例

CSS代码

.el {
  resize: both;
  overflow-y: auto;
  border: 2px solid black;
  height: 100px;
  width: 100px;
  position: absolute; /* 统一设为绝对定位脱离文档流 */
  background: #fff; /* 加白色背景避免透明透出下层元素 */
}
/* 父级参照容器设为相对定位 */
body {
  position: relative;
  margin: 0;
  padding: 10px;
}

JS代码

const els = document.querySelectorAll('.el');
let maxZ = 1; // 记录当前最高层级

// 初始化每个元素的初始位置
els.forEach(el => {
  // 获取元素在原文档流中的渲染坐标
  const rect = el.getBoundingClientRect();
  // 赋值给绝对定位坐标，保持初始布局和原来一致
  el.style.left = rect.left + 'px';
  el.style.top = rect.top + 'px';
  // 绑定按下事件，触发操作时提升层级
  el.addEventListener('mousedown', () => {
    maxZ += 1;
    el.style.zIndex = maxZ;
  });
});

HTML代码

<div class="el">1</div>
<div class="el">2</div>
<div class="el">3</div>

方案说明 #

• 初始位置和你原布局完全一致，不会出现堆叠问题
• 任意元素被点击/缩放时都会自动提升到最高层级，不会被其他元素遮挡
• 所有元素脱离文档流，尺寸变化不会影响其他元素的位置，完全符合预期效果
• 天然兼容后续拖拽功能，拖拽时直接修改元素的left、top属性即可

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