为什么在使用position: absolute和position: relative时，页面布局会出现异常？如何解决这种问题？

在前端开发中，常常会遇到使用 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。这些方法都可以有效地解决这个问题。

1. 使用 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>

   或者

   

   Mokker AI

   AI产品图添加背景

   下载

   <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>

2. 使用 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属性来调整布局，从而确保所有元素能够正确显示。