在前端开发中，常常会遇到使用 position: absolute; 和 position: relative; 时，其他标签内容出现异常的情况。这类问题通常与元素的定位和布局有关，但并不是所有的异常都是由定位属性直接导致的。让我们具体分析给出的两个示例，并解释为什么会出现这样的问题以及如何解决。
问题分析
在第一个例子中，尽管没有使用 margin，但布局出现异常，即”WORLD”文字不见了。这是因为绝对定位的元素脱离了正常的文档流，它的父级元素（使用了 position: relative; 的元素）不会被绝对定位的子元素所影响，因此父级元素的高度不会因为绝对定位的子元素而增加。这导致父级元素的高度为零，而紧随其后的”WORLD”文字被覆盖在绝对定位的元素下方，从而看不见。
第二个例子尝试通过添加 margin-top 来修复第一个例子中的异常，但问题依然存在。这是因为虽然 margin-top 使”WORLD”文字向下移动了一定距离，但由于父级元素的高度仍然为零，”WORLD”文字仍然无法正常显示。
解决方案
问题答案中提到的解决方法是给最外层的 div 设置 padding-top 或 overflow: hidden/scroll，或者给”WORLD”文字的容器设置 padding-top: 200px。这些方法都可以有效地解决这个问题。
-
使用 padding-top 或 overflow: hidden/scroll：
给最外层的 div 设置 padding-top 或 overflow: hidden/scroll 可以触发BFC（块格式化上下文），使得父级元素能够包含绝对定位的子元素，从而避免高度为零的问题。<div style="padding-top: 200px;"> <div style="position: relative;"> <div style="position: absolute; top: 0; left: 0; height: 200px; width: 200px; background-color: red;">HELLO</div> </div> <div> <p>WORLD</p> </div> </div>
或者
<div style="overflow: hidden;"> <div style="position: relative;"> <div style="position: absolute; top: 0; left: 0; height: 200px; width: 200px; background-color: red;">HELLO</div> </div> <div> <p>WORLD</p> </div> </div>
-
使用 padding-top 调整”WORLD”文字的容器：
将”WORLD”文字的容器设置为 padding-top: 200px，可以确保文字在绝对定位的元素下方显示。<div> <div style="position: relative;"> <div style="position: absolute; top: 0; left: 0; height: 200px; width: 200px; background-color: red;">HELLO</div> </div> <div style="padding-top: 200px;"> <p>WORLD</p> </div> </div>
原理解释
这些解决方案的原理在于它们能够正确处理父级元素的高度问题。绝对定位的元素脱离了正常的文档流，因此不会影响父级元素的高度。通过触发BFC或使用 padding-top，可以确保父级元素的高度能够正确计算，从而避免”WORLD”文字被覆盖的问题。
综上所述，解决此类布局异常问题时，需要理解绝对定位对父级元素高度的影响，并通过适当的css属性来调整布局，从而确保所有元素能够正确显示。
