用 position: absolute 叠加图片需父容器设 position: relative 以提供定位上下文，图片设 absolute 并显式指定 top/left，用 z-index 控制层级；注意避免触发新层叠上下文，推荐统一尺寸+aspect-ratio 实现响应式叠层。

用 position: absolute 叠加图片是最直接的方式

层叠本质是让多个元素脱离文档流、共享同一坐标空间。position: absolute 是最常用且兼容性最好的选择，但必须确保父容器有 position: relative（或 absolute/fixed），否则定位会相对于整个页面，导致图片飞出预期区域。

常见错误是只给图片加 position: absolute，却忘了给外层容器设定位上下文。结果就是所有图片都堆在浏览器左上角（top: 0; left: 0 默认值）。

• 外层容器必须设 position: relative
• 每张图片设 position: absolute，并显式指定 top 和 left（哪怕都是 0）
• 用 z-index 控制叠放顺序：数值越大越靠前

图片尺寸不一致时，用 width 和 height 统一缩放更可控

原始图片宽高不同，直接叠加容易错位或裁切。CSS 的 width 和 height 配合 object-fit 能避免拉伸变形，但要注意：object-fit: cover 会裁剪，contain 会留白。

如果追求精确对齐（比如做图层蒙版或合成效果），建议提前用工具统一导出为相同尺寸，再用 CSS 控制显示大小；否则仅靠 max-width: 100% 无法保证各图在叠层中位置一致。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 推荐设固定宽高，如 width: 300px; height: 200px;
• 搭配 object-fit: cover 保持比例填充
• 避免只设 width 不设 height，否则高度随内容浮动，叠层错位

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

z-index 只在同一个层叠上下文中起作用。如果某个图片父元素设置了 opacity: 0.99、transform: translateZ(0) 或 will-change: transform，它就会创建新层叠上下文，导致内部子元素的 z-index 相对这个新上下文计算，而不是全局。

典型表现是：三张图按 1/2/3 设置 z-index，但第 3 张始终被第 1 张盖住——很可能中间某张图的祖先元素意外触发了层叠上下文。

• 排查方式：用浏览器开发者工具检查元素 computed 样式，看是否有 transform、opacity 、<code>filter 等属性
• 修复方法：移除不必要的视觉属性，或把所有图片放在同一层 DOM 深度下
• 简单原则：所有参与叠放的 <img> 应为同级元素，且父容器不要加可能触发层叠上下文的样式

需要响应式叠层？优先用 aspect-ratio + max-width 替代媒体查询

移动端屏幕窄，固定像素的 top/left 容易让图片跑出视口。与其写一堆 @media 调整偏移量，不如用相对单位 + 容器约束来保形。

aspect-ratio（现代浏览器支持）能锁定容器比例，配合 max-width: 100% 和 position: absolute 的百分比偏移（如 top: 10%; left: 15%），可让叠层结构随容器缩放自动适应。

• 外层容器设 aspect-ratio: 4/3; max-width: 100%;
• 图片定位改用百分比，如 top: 20%; left: 25%
• 旧浏览器不支持 aspect-ratio？用 padding-top 技巧模拟（需额外内层 wrapper）

实际叠层效果的关键不在“怎么堆”，而在于“谁控制坐标原点”和“谁决定层级起点”。稍不注意，z-index 就失效，top 就飘走——这些细节比写几行 CSS 更容易卡住进度。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！