如何让绝对定位的div与另一个div始终保持50px间距？

嘿，这个问题其实是因为绝对定位元素脱离了文档流导致的——你的.box1用了position:absolute之后，就不再占据文档流的空间了，所以.box2的margin-top:50px其实是相对于父元素的顶部，而不是.box1的底部，自然没法跟着.box1的高度变化保持稳定间距。

给你两种解决方案，根据你的布局需求选：

方案一：移除绝对定位（推荐，最简单可靠） #

如果没有特殊布局要求必须用绝对定位，直接把.box1的position:absolute和top:0删掉就行。这样.box1会留在文档流里，.box2的margin-top:50px就会自动相对于.box1的底部，不管.box1内容多长，间距都稳稳保持50px：

.box1 { 
  border: 1px solid red; 
  width: 100px; 
}
.box2 { 
  margin-top: 50px; 
  border: 1px solid green; 
  width: 100px; 
}

<div class="box1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </div>
<div class="box2">box 2</div>

方案二：必须保留绝对定位？用JS动态计算 #

如果因为布局需求必须让.box1保持绝对定位，那纯CSS就搞不定了（毕竟脱离流的元素高度没法被CSS感知到），这时候需要用JavaScript动态计算.box1的高度，然后给.box2设置对应的margin-top：

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');

function updateBox2Spacing() {
  // 获取.box1的实际渲染高度
  const box1Height = box1.offsetHeight;
  // 设置.box2的margin-top为.box1高度 + 50px的目标间距
  box2.style.marginTop = `${box1Height + 50}px`;
}

// 页面加载完成后初始化间距
updateBox2Spacing();
// 窗口大小变化时重新计算（如果.box1高度会随窗口尺寸变化）
window.addEventListener('resize', updateBox2Spacing);
// 若后端内容是动态加载的，记得在内容渲染完成后调用updateBox2Spacing()

这样不管.box1的内容长度怎么变，.box2都会始终跟在它下方50px的位置~

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