菜单溢出源于定位上下文、溢出控制和层叠顺序未对齐；父容器须设position: relative，禁用transform创建新层叠上下文，避免overflow: hidden裁剪，用top: 100%替代固定像素值定位。

菜单溢出不是“样式没写好”，而是定位上下文、溢出控制和层叠顺序三者没对齐——只要漏掉其中一环，position: absolute 下拉项就会飘到屏幕外或被截断。

父容器必须设 position: relative

这是最常被跳过的一步。下拉菜单用 position: absolute 时，浏览器会向上查找第一个非 static 定位的祖先；如果没找到，就落到 body 上，导致菜单永远对不齐触发项。

• 每个含下拉的 <li> 或 <div class="dropdown"> 都要加 <code>position: relative
• 别在父级上同时用 transform（比如 scale(0.95)）——它会创建新层叠上下文，让 z-index 失效，菜单可能被轮播图或 sticky header 盖住
• 如果导航项用了 float，记得清除浮动，否则父容器高度塌陷，position: relative 就没生效范围

overflow: hidden 是下拉菜单的隐形杀手

很多页面给导航栏容器（比如 .navbar）加了 overflow: hidden 来防内容撑破，结果下拉菜单刚展开就被裁掉一半——因为 position: absolute 元素一旦超出其 containing block 的边界，就会被裁剪。

• 检查所有包裹下拉菜单的父级：包括 nav、.header、甚至 body，确认它们没有意外的 overflow: hidden
• 若必须限制高度（比如做固定头），改用 max-height + overflow-y: auto，保留横向溢出自由度
• 移动端侧滑菜单关闭后留白或滚动条？大概率是 .nav-links 的父容器没设 position: relative，又没配 overflow: hidden，负偏移区域被当成可滚动内容区

用 top: 100% 替代固定像素值定位

写 top: 44px 看似简单，但导航高度一变（比如文字换行、加图标、响应式缩放），菜单立刻错位。而 top: 100% 始终紧贴父项底部，更鲁棒。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载

立即学习“前端免费学习笔记（深入）”；

• 搭配 left: 0 或 right: 0 使用，确保水平对齐基准明确
• 为防像素对齐缝隙，可加 margin-top: -1px，比靠 border 或 box-shadow 补更干净
• 若父项高度动态（如多行文本），优先用 transform: translateY(100%)，重绘性能更好，iOS Safari 也不易闪烁

移动端展开菜单时内容被挤出视口

这不是 JS 控制问题，而是 CSS 层叠与视口约束没到位。常见于汉堡菜单点击后，页面突然出现横向滚动条、缩放或底部白边。

• 侧滑菜单元素（如 .offcanvas）必须设 position: absolute 或 fixed，且其直接父容器（比如 body 或 main）要设 position: relative 并加 overflow: hidden
• 别把全高菜单写成 height: 100vh 嵌套在无高度约束的 <nav></nav> 里——<nav></nav> 默认 display: block，不是可靠的 containing block
• iOS Safari 对 transform + position: fixed 组合敏感，换成 position: sticky; top: 0; 更稳

真正卡住人的从来不是“怎么写出来”，而是“为什么一动就破”。菜单是否溢出，取决于你有没有在三个地方同时守住底线：定位参考点、溢出裁剪边界、层叠上下文层级——少一个，display: none 切换再顺滑也没用。