fixed底部条被图片遮住是因为图片父容器创建了新堆叠上下文，而.footer未设z-index仍为auto；须给.footer设正整数z-index并配position，同时body加padding-bottom预留空间，或按需改用Flexbox实现贴底页脚。
为什么 fixed 底部条会被图片遮住
不是它“层级低”，而是图片（或其父容器）意外创建了新的堆叠上下文，把自身抬到了一个独立的绘制层里——而你的 .footer 没显式声明 z-index，仍处于默认的 z-index: auto 状态，结果在两个独立堆叠上下文之间，后出现的图片层自然盖过了它。
常见触发条件包括：filter（如 grayscale()、blur()）、transform、opacity 、will-change，甚至某些 backdrop-filter。只要这些属性出现在底部条上方的任意元素上，就可能出问题。
必须给 fixed 底部条加 z-index
这是最直接有效的解法，但要注意写法和取值逻辑：
-
.footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; }——z-index必须配合position才生效，只写z-index没用 - 值推荐用阶梯式整数（如 100、200、300），避免用 9999 这类“魔法数字”，否则后续加弹窗、提示框时容易冲突
- 如果页面还有其他 fixed 元素（比如顶部导航栏），确保它们的
z-index值有明确层级关系，例如.header { z-index: 200; }、.footer { z-index: 100; } - 不要设
z-index: 0或负值——这反而可能让它掉进某个父级堆叠上下文中，更难控制
body 要留 padding-bottom，否则内容会被遮
仅靠 z-index 解决的是“被盖住”，但没解决“压住内容”。position: fixed 的底部条脱离文档流，浏览器不会自动为它腾空间。用户滚动到底部时，最后一段文字大概率被截断。
正确做法是强制 body 预留空间：
-
body { padding-bottom: 56px; }—— 值必须 ≥ 底部条渲染后的实际高度（非视口百分比，非vh） - 高度建议用固定像素值（如 48px、56px、64px），避免 Safari 地址栏收放导致 viewport 高度跳变，引发 padding 计算错乱
- 若底部条高度动态（比如随字体缩放变化），可用
clamp()：padding-bottom: clamp(48px, 5.5vw, 64px); - 绝对不要用
margin-bottom加在最后一个内容块上——响应式下极易失效，且无法适配 flex/grid 布局
别混淆“悬浮”和“沉底”，需求错了代码全白搭
如果你真正想要的是“内容少时页脚贴底、内容多时随内容自然落位”，那 position: fixed 就是误用。这种场景该用 Flexbox：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }-
main { flex: 1; }—— 吃掉所有剩余空间 -
footer { width: 100%; }—— 不需要position，也不遮内容 - HTML 结构必须是
flex: 1不生效
真正卡住人的从来不是怎么写 CSS，而是还没动手前，就没分清自己要的是“永远钉在屏幕底”的悬浮，还是“随内容浮动的页脚”。这两个需求的技术路径完全相反，混着写只会反复推倒重来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
