为何父DIV无法自动包裹设置了top值的相对定位子元素？

问题根源：position: relative搭配top属性实现的偏移属于视觉层面的位移，不会改变元素在文档流中的占位空间。你的.primitive容器用height: fit-content计算高度时，只会基于子元素的原始占位尺寸，完全不会考虑偏移后的位置，所以容器无法自动扩展包裹偏移后的子元素。

以下是无需JS计算高度的纯CSS解决方案：

方案1：用margin-top替代relative + top #

直接去掉h元素的position: relative; top: 100px，换成margin-top: 100px。这种偏移属于文档流内的布局调整，父容器的fit-content高度会自动包含子元素的margin空间，自然实现包裹效果。

示例代码：

<div id="blockport">
  <div class="primitive">
    <h1 style="margin-top: 100px">标题1</h1>
    <h2>标题2</h2>
  </div>
</div>

<style>
.primitive {
  position: absolute;
  width: fit-content;
  height: fit-content;
  border: 1px solid #ccc; /* 便于观察容器范围 */
}
</style>

方案2：给父容器添加padding-top #

如果需要所有子元素整体向下偏移，直接给.primitive添加padding-top: 100px，同时移除h元素的相对定位和top属性。父容器的fit-content高度会自动包含padding区域，子元素在padding内排列时会被完整包裹。

示例代码：

<div id="blockport">
  <div class="primitive">
    <h1>标题1</h1>
    <h2>标题2</h2>
  </div>
</div>

<style>
.primitive {
  position: absolute;
  width: fit-content;
  height: fit-content;
  padding-top: 100px;
  border: 1px solid #ccc;
}
</style>

方案3：Flex布局适配 #

给.primitive添加display: flex; flex-direction: column，然后给需要偏移的h元素设置margin-top: 100px。Flex布局下，父容器会自动适配所有子元素的布局空间（包括margin带来的偏移），无需额外计算高度。

示例代码：

<div id="blockport">
  <div class="primitive">
    <h1 style="margin-top: 100px">标题1</h1>
    <h2>标题2</h2>
  </div>
</div>

<style>
.primitive {
  position: absolute;
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
}
</style>

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