用z-index控制图片层级的前提是元素必须定位（如relative、absolute），否则z-index无效；需注意层叠上下文限制，避免opacity、transform等触发新上下文导致z-index失效。

用 z-index 控制图片层级的前提是定位

直接给 标签加 z-index 没用，因为 z-index 只对「定位元素」生效。必须先给图片设置 position（如 relative、absolute 或 fixed），否则 z-index 被忽略。

常见错误现象：z-index: 999 写了但图层没变化，大概率是漏了 position。

• position: relative 最安全，不脱离文档流，适合微调叠放顺序
• position: absolute 常用于叠加图层（比如头像+徽章、主图+水印）
• 避免对 position: static（默认值）元素设 z-index

多个图片叠放时，z-index 数值决定上下关系

数值越大越靠前，但只在**同级定位上下文**中比较。如果父容器有 position + z-index，子元素的 z-index 是相对于该容器的层叠上下文，不是全局。

示例场景：一个带边框的卡片里放两张图，想让第二张盖住第一张：

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

  @@##@@
  @@##@@

• 两张图都在同一个 relative 容器内，z-index: 2 的图会盖住 z-index: 1 的图
• 如果把第二张图移到容器外，或其父级另有一个 z-index: 0 的定位块，那它可能被整体压到下面
• 不要依赖超大数字（如 999999），优先理清层叠上下文结构

z-index 不生效？检查是否触发了新的层叠上下文

除了 position + z-index，以下 CSS 属性也会创建独立的层叠上下文，导致子元素的 z-index 在内部排序，无法越过父级影响外部：

• opacity 小于 1（如 opacity: 0.99）
• transform 非 none（如 transform: translateZ(0)）
• filter 非 none
• will-change 设为 transform 等属性

典型问题：给图片加了 filter: blur(1px) 后，再怎么调 z-index 也盖不住隔壁没加滤镜的图——因为两者已不在同一层叠上下文中。

纯 HTML 结构顺序不能替代 z-index 控制

虽然 DOM 后面的元素默认渲染在前面元素之上（即“源顺序”有影响），但这只适用于**非定位元素之间**。一旦任一元素被定位，层叠规则就以 z-index 和层叠上下文为准，DOM 顺序失效。

所以别指望靠调整 标签在 HTML 中的位置来控制覆盖关系，尤其在复杂布局中——这不可靠，且难以维护。

真正要动手的地方只有两个：确保 position 设置正确，然后在正确的上下文里设合理的 z-index 值。其他花招，比如套多层 div 硬撑高度或滥用 margin 挤位置，只会让层叠逻辑更难追踪。

# css  # html  # html5  # Static  # Filter  # dom  # position  # margin  # transform  # 两张  # 图层  # 滤镜  # 也会  # 都在  # 多个  # 设为  # 适用于  # 会让  # 另有 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何自定义建站之星网站的导航菜单样式？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何在橙子建站上传落地页？操作指南详解  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  如何挑选最适合建站的高性能VPS主机？  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  Laravel集合Collection怎么用_Laravel集合常用函数详解  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  如何在阿里云虚拟主机上快速搭建个人网站？  JavaScript数据类型有哪些_如何准确判断一个变量的类型  高防服务器：AI智能防御DDoS攻击与数据安全保障  网站建设整体流程解析，建站其实很容易！  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel Docker环境搭建教程_Laravel Sail使用指南  零服务器AI建站解决方案：快速部署与云端平台低成本实践  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  Python结构化数据采集_字段抽取解析【教程】  香港网站服务器数量如何影响SEO优化效果？  香港服务器部署网站为何提示未备案？  Laravel如何使用.env文件管理环境变量？（最佳实践）  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  如何在阿里云域名上完成建站全流程？  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  微信小程序 input输入框控件详解及实例（多种示例）  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  jQuery validate插件功能与用法详解  如何为不同团队 ID 动态生成多个“认领值班”按钮  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  大学网站设计制作软件有哪些,如何将网站制作成自己app？  Laravel怎么实现验证码(Captcha)功能  Laravel如何使用Collections进行数据处理？（实用方法示例）  济南网站建设制作公司,室内设计网站一般都有哪些功能？  JavaScript常见的五种数组去重的方式  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  常州企业网站制作公司,全国继续教育网怎么登录？  Python图片处理进阶教程_Pillow滤镜与图像增强  WEB开发之注册页面验证码倒计时代码的实现  做企业网站制作流程,企业网站制作基本流程有哪些？