position: absolute 元素超出父容器不是 bug，而是因父容器未设 position: relative 导致其定位参考系向上回溯至 body 或视口；此时 overflow: hidden 无效，因父容器高度塌陷且未形成包含块。

position: absolute 元素超出父容器，不是 bug，是 CSS 定位机制的必然结果——它根本没打算“听”父容器的话。

父容器没设 position: relative，就等于没挂牌子

• 浏览器找定位参考时，只认 position 值为 relative、absolute、fixed 或 sticky 的祖先，static（默认值）直接被跳过
• 如果父容器没加 position: relative，absolute 子元素会一路往上，最终以 body 或视口为参考系
• 此时你在父容器上写 overflow: hidden，纯属贴错位置：裁剪对象根本不是它

用 DevTools 看一眼选中元素的 Computed → Containing block，立刻能确认它到底相对谁定位。

父容器高度塌陷，裁剪无从谈起

• 所有子元素都是 absolute，意味着它们全部脱离文档流
• 父容器失去内容撑高依据，计算高度变成 0
• 即使写了 overflow: hidden，也等于在一张“看不见的纸”上画框——没尺寸，就没裁剪范围

常见表现：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器背景色/边框消失
• overflow: hidden 像没生效，其实它生效了，只是裁了个空盒子

解决方向不是调 z-index 或改 transform，而是给父容器明确高度（如 height: 200px）、最小高度（min-height），或换布局方式（display: flex / grid）让它自动撑开。

overflow: hidden 和 position: relative 必须写在同一层

• 把 overflow: hidden 加在祖父级、兄弟容器，甚至用 Tailwind 写成 class="overflow-hidden relative" 但顺序错乱，都可能失效
• 正确写法必须是同一选择器内同时声明：

  .parent {
  position: relative;
  overflow: hidden;
  }

注意：width: 100% 或 max-width 往往也要配着写，否则仅靠 top/left 定位，子元素仍可能因内容过长而溢出边界。

真正容易被忽略的，是开发者工具里那个 Containing block 显示的参考节点——它不骗人，也不管你代码里“看起来像父级”的结构。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！