weicw-dshsa
1b3e020800
fix(template-07): 移动端顶部菜单展开后无法滚动
菜单面板留在 sticky 的 <header> 内，踩了两个叠加的 CSS 陷阱：
1) <header> 带 sticky（position:sticky + z-50）会自建层叠上下文，
面板在其中 z 写多大都只能在 header 内部排序，整体仍被 DOM 靠后的
<main>（Hero 为 relative，同样自建上下文）盖住。
2) sticky 的 header 会成为后代 fixed 的包含块——fixed 定位基准从视口
退化成 header 的盒子并被其高度裁剪。原实现面板是普通流式元素，高度
由内容撑开（汇吉采 6 个带子菜单的栏目约 1000px）直接溢出屏幕，而
header 内没有可滚动容器，于是「展开即滚不动」，底部栏目够不着。
修复：面板 Teleport 到 body 脱离 header 的层叠上下文；面板改 fixed 并
四边锚定（inset-x-0 top-16 bottom-0 + overflow-y-auto + overscroll-contain），
top/bottom 同时钉住后高度才由视口决定，长菜单在面板内滚动。
实测（390x844 设备模拟）：面板可滚到底，header 固定、背景页不动；
桌面 1440x900 无回归。约束与「只写 top-16 不够」的警告已写进组件注释。
Refs: .scratch/hjc-web-mobile-menu-scroll/issues/01-fix-mobile-menu-scroll.md
2026-10-08 16:35:24 +08:00
..
2026-10-08 16:35:24 +08:00
2026-09-30 07:38:05 +08:00