用 position: absolute 做中间凸起易错位，因其定位基准是最近的 position: relative 祖先；若导航栏无 relative，则以视口为基准，导致刘海屏、安全区或软键盘下偏移失准。
为什么用 position: absolute 做中间凸起容易错位
因为 absolute 脱离文档流后，它的定位基准是最近的 position: relative 祖先容器——而底部导航栏如果直接套在 body 上，又没手动加 relative，那它就会以视口为参考，导致在不同机型上偏移量不一致，尤其遇到刘海屏、安全区或软键盘弹出时，top/bottom 值会完全失准。
常见错误现象：transform: translateY(-20px) 在 iPhone 15 Pro 上刚好，但在安卓全面屏上凸起部分被截断；或者点击区域悬空，实际可点区域和视觉位置对不上。
- 必须给导航栏容器显式设置
position: relative，哪怕它只是个<nav></nav> - 中间按钮用
position: absolute时，优先用bottom: 100%+left: 50%+transform: translateX(-50%)定位，比硬写像素值更稳定 - 避免同时混用
top和bottom，否则在某些 WebView（如微信内置）中会触发重排异常
margin-top 负值为什么比 transform 更难控制
负 margin-top 会直接影响父容器的高度计算，尤其当导航栏本身是 fixed 且主内容区靠 padding-bottom 避让时，负 margin 会让父容器“以为”自己变矮了，结果主内容被导航栏遮住——这和你想“顶出来”的目的完全相反。
而且负 margin 无法触发硬件加速，动画卡顿明显；在 iOS Safari 中还可能触发渲染层合并失败，导致凸起按钮边缘发虚。
- 凸起动作一律用
transform: translateY()，它不参与文档流，不影响布局，且天然支持 GPU 加速 - 如果必须用负 margin（比如老项目兼容 IE），得同步调整父容器的
height或用overflow: hidden截断溢出，否则视觉和交互会脱节 - 不要对带
border-radius的凸起按钮用负 margin，圆角会被裁切，出现锯齿或白边
如何让凸起按钮真正“嵌入”导航栏而不是浮在上面
纯靠 absolute + transform 只是把按钮往上拉，但导航栏背景还是平的，中间留出一个难看的缺口。用户一眼就能看出这是“贴上去”的，不是一体成型的。
关键在于用 clip-path 或伪元素在导航栏背景上“挖”一个匹配的凹槽。否则即使按钮位置对了，阴影、圆角、点击反馈都会显得突兀。
- 推荐用
::before在导航栏容器内画一个椭圆镂空：content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 60px; height: 30px; border-radius: 50%; background: inherit; - 如果用
clip-path: path()，路径里必须包含与按钮顶部曲线完全一致的贝塞尔段，否则衔接处会有 1px 缝隙 - 凸起按钮自身的
border-radius建议设为50% 50% 0 0，只圆顶部两个角，底部保持平直，才能自然压进导航栏
移动端安全区与软键盘下的定位偏移怎么兜底
env(safe-area-inset-bottom) 只能告诉你要留多少空白，但它不会自动帮你把凸起按钮往下“推”。如果你的凸起按钮高度是 60px，而安全区是 34px，那它就有一半悬在手势条上方，点不到。
更麻烦的是软键盘弹出时，visualViewport 高度变化，但 absolute 元素不会自动响应——它只会傻等你手动重算 bottom 值。
- 监听
resize和focusin/focusout，动态更新凸起按钮的bottom值：比如bottom: calc(env(safe-area-inset-bottom) + 20px) - 微信 WebView 中
env()不可靠，需 UA 判断后 fallback 到固定值（如34px） - 绝对不要用
vh单位做凸起偏移，iOS Safari 下软键盘会重算vh，造成按钮跳动
touch-action 还按原位置响应，手指点在凸起顶部时可能根本没触发。得手动扩大 padding 或用 pointer-events: auto 配合 z-index 显式提层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
