绝对定位缩略图前必须设父容器为 position: relative，否则会相对于最近定位祖先偏移导致错位；top/left 需手动计算，CSS 变量可辅助但兼容性受限；z-index 仅对定位元素生效；响应式下推荐 Grid/Flexbox 替代。
绝对定位缩略图前必须设父容器为 position: relative
不设这个，position: absolute 的缩略图会相对于最近的定位祖先（可能是 body）偏移，导致所有图片堆在左上角或错位。常见现象是：缩略图看似“消失”，其实是跑出视口了。
- 父容器（比如
.gallery）必须显式声明position: relative，哪怕它没其他样式 - 不要依赖
display: inline-block或float容器自动成为定位上下文——它们不是 - 如果父容器本身是
position: absolute或fixed，也能当定位上下文，但通常不推荐嵌套多层定位
top/left 值要配合缩略图尺寸手动计算
绝对定位不自动布局，每个缩略图的 top 和 left 得自己算。这不是缺陷，而是可控性的代价——你得知道每张图宽高、间距、行列数。
- 假设缩略图统一为
120px × 80px，间隔8px，那么第i行第j列的top = i * (80 + 8)，left = j * (120 + 8) - 用 CSS 变量（
--row,--col）配合calc()可减少硬编码，但浏览器兼容性要注意（IE 不支持） - 别用
%值模拟网格——百分比基于父容器宽度，而高度无法同步响应，容易错行
z-index 控制叠放顺序时，只对定位元素生效
想让某张缩略图浮在最上层？直接给 z-index: 999 没用，除非它已经是 position: absolute（或 relative/fixed）。
-
z-index对static元素完全无效，这是最常见的“设了没反应”原因 - 同一父容器下，后写的绝对定位元素默认层叠在前写的上面（文档流顺序），
z-index是覆盖这个默认行为的 - 避免跨多个父容器乱设
z-index，不同定位上下文之间层叠关系独立，容易误判
响应式下绝对定位画廊几乎不可维护
屏幕一变，所有 top/left 都得重算。媒体查询里写几十组偏移值？不如换方案。
- 纯 CSS Grid 或 Flexbox 能自动适应列数变化，且语义清晰、可访问性好
- 如果坚持用绝对定位，至少把布局逻辑抽到 JS 里（监听
resize，动态更新style.left），但注意性能——别在滚动中频繁计算 - 移动端触摸操作（如拖拽缩略图）与绝对定位冲突大，
transform: translate()比改left更适合动画场景
绝对定位画廊本质是“静态快照”，适合固定尺寸、内容极少、且必须精确像素控制的场景。多数时候，它只是因为“看起来能实现”就被选中，结果卡在响应式和维护性上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
