如何让容器尺寸适配其position: absolute子元素的尺寸

核心问题是绝对定位的子元素会脱离文档流，导致容器无法自动获取尺寸。可以用CSS Grid布局实现无需手动指定容器尺寸，同时让子元素重叠并保持与文本同行：

实现思路 #

• 容器设置为inline-grid（替代原来的inline-block），让它能和文本在同一行
• 定义单个网格单元格，所有子元素都放在这个单元格内，自然重叠
• 容器会自动根据子元素中的最大宽高来计算自身尺寸，无需手动设置

完整代码示例 #

CSS #

.container {
  display: inline-grid; /* 关键：inline-grid让容器同行，同时自动计算尺寸 */
}

.block {
  grid-area: 1 / 1; /* 所有子元素放在第1行第1列的网格单元格，实现重叠 */
}

HTML #

This is a <div class="container">
  <div class="block" style="background: rgba(255, 0, 0, 0.3);">wonderful</div>
  <div class="block" style="background: rgba(0, 255, 0, 0.3);">cool</div>
  <div class="block" style="background: rgba(0, 0, 255, 0.3);">great</div>
</div> test!

补充说明 #

如果需要更精细的定位（比如微调位置），可以给.block加上position: relative，然后用top/left属性调整，不会影响容器的尺寸计算。

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