在一个前端和position:absolute; position: relative;中的其他标签内容为什么出现异常？

Question

在一个前端和position:absolute; position: relative;中的其他标签内容为什么出现异常

这不是一个margin合并和坍塌的问题

第一个例子中没有使用margin，但是布局出现异常。即WORLD不见了。
第二个例子是为了尝试着修复异常，使用了margin，但依旧未修复。回答中有提到在顶层div使用overflow:hidden修复问题，即是使用了margin加上overflow:hidden修复了问题，但是不知道修复问题的原理是什么。

Element Plus Playground 1

<script setup lang="ts">

</script>

<template>
  <div>
    <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>
</template>

<style>

</style>

尝试过margin-top，而后又出现其他的异常，期望能正常显示WORLD

Element Plus Playground 2

<script setup lang="ts">

</script>

<template>
  <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="margin-top: 200px;">
      <p>WORLD</p>
    </div>
  </div>
</template>

<style>

</style>

Answer 1

这是一个基础的 margin 合并的问题，并不是定位造成的。

给最外层的 div 设置一个 padding-top 或者 overflow:hidden/scroll 就可以解决问题了，或者把 word 容器的样式调整为 padding-top:200px 也可以。

外边距合并的问题可以从这里了解 👉 理解margin塌陷和margin合并及其解决方案小问题

Answer 2

https://element-plus.run/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCB...