最小可行结构是用 position: fixed 实现底部固定悬浮条，需给 body 加 padding-bottom 避免遮挡内容；三栏布局优先用 flex: 1 或 flex: 0 0 33.33% 均分宽度，避免 float 兼容性问题。
用 position: fixed 实现底部三栏导航的最小可行结构
底部固定悬浮条本质是脱离文档流、贴底定位的容器，三栏只是内部布局方式。关键不是“悬浮”，而是“固定在视口底部且不遮挡内容”。position: fixed 是唯一可靠选择，sticky 在底部场景下兼容性和行为都不稳定。
必须给 加 padding-bottom（值 ≥ 悬浮条高度），否则内容会被遮住——这是最常被忽略的一步。
示例结构：
<div id="bottom-nav"> <button>首页</button> <button>订单</button> <button>我的</button> </div>
对应 CSS：
#bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 56px;
display: flex;
justify-content: space-around;
align-items: center;
background: #fff;
border-top: 1px solid #eee;
z-index: 1000;
}
三栏等宽布局的三种写法及兼容性取舍
三栏核心诉求是均分宽度、点击区域足够大、适配小屏。不用 flex 的老项目可能用 float 或 inline-block，但现代项目优先用 flex。
-
flex: 1最简洁：每个按钮设flex: 1，自动等分；但按钮文字长度差异大会导致视觉不均 -
flex: 0 0 33.33%更可控：强制每栏占 1/3 宽度，适合图标+文字组合，避免文字撑开 - 避免用
width: 33.33%+float：IE11 及以下有 1px 间隙问题，且清除浮动易出错
如果需支持 iOS Safari 旧版本（gap，改用 margin 控制栏间距。
点击区域小、误触多？加 padding 和 touch-action
移动端手指操作需要至少 44×44px 的可点击区域，但按钮文字本身往往远小于此。直接放大字体或按钮会破坏设计比例，正确做法是扩大内边距。
务必设置：
- 按钮
padding: 12px 0（上下留足空间，左右靠 flex 均分控制） - 容器
height要 ≥ 56px，确保 padding 有空间展开 - 加
touch-action: manipulation到按钮上，减少 iOS 点击延迟
错误示范：font-size: 20px 却只给 padding: 4px 0 → 实际点击区仍不足，用户反复点不中。
z-index 被遮挡、层级错乱的典型原因
底部悬浮条被其他元素盖住，90% 是因为 z-index 值不够，或父容器形成了新的层叠上下文（stacking context）。
排查重点：
- 检查悬浮条父级是否用了
transform、opacity 、<code>will-change—— 这些都会创建新层叠上下文，使子元素z-index相对父级生效，而非全局 - 不要用
z-index: 9999这种魔数，统一定义变量（如--z-bottom-nav: 1000），避免后期冲突 - 若页面用了模态框（modal），它的
z-index必须 > 底部条，否则点不到按钮
真正麻烦的不是写法，而是当底部条和弹窗、下拉菜单、视频播放器共存时，z-index 的隐式继承关系容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
