CSS 负 margin 如何让普通流元素发生重叠？

结论

在题目给出的普通块级元素布局中，两个元素的垂直外边距会折叠。margin-bottom: -140px 与 margin-top: -40px 折叠后的值是 -140px，不会相加成 -180px。这个负间距会让第二个元素上移，使它的盒子与第一个元素重叠。

结合示例看位置变化

假设第一个元素从纵向位置 0 开始，并忽略外层容器的边距和内边距。它的高度是 200px，下边缘位于 200px。相邻块级元素的垂直外边距折叠后，第二个元素会从正常衔接位置上移 140px，顶部落在 60px。第二个元素高 100px，底部位于 160px。因此，两者盒子的重叠范围是 60px 到 160px，共 100px。

.element1 {
  height: 200px;
  margin-bottom: -140px;
}

.element2 {
  height: 100px;
  margin-top: -40px;
}

两个负外边距折叠时，结果取绝对值较大的那个负值，所以这里是 -140px，而不是将两个值相加。

负外边距如何影响布局

外边距位于元素边框盒之外。普通文档流中的块级元素会根据外边距参与布局。负外边距可以缩小元素之间的间距，让后续元素向前移动；它不会自动将元素改为绝对定位，也不会改变示例中声明的 height。

是否会出现可见重叠，取决于移动后的盒子范围是否相交。题目中的第二个元素上移 140px，自身高度为 100px，因此实际重叠范围是 100px。

注意事项

垂直外边距折叠只在符合条件的布局中发生。题目中的相邻块级元素处于普通文档流中，符合折叠场景。使用 Flexbox 或 Grid 时，项目之间的外边距不会这样折叠。若父元素或布局上下文发生变化，应根据实际结构重新判断。

备注：内容仅供参考。