用 position: absolute 布局图片画廊易错位，主因是父容器 padding/border 未清空或未设 relative；应设 padding: 0、border: none、box-sizing: border-box，并用 transform: translate(-50%, -50%) 居中，配合 box-shadow 替代 border 实现灵活边框。
图片画廊用 position: absolute 容易错位？先清空父容器的 padding 和 border
绝对定位的图片会相对于最近的「已定位祖先元素」（即 position 为 relative、absolute 或 fixed 的父级）计算偏移。但很多人忘了：如果父容器有 padding 或 border，而没在 top/left 计算中扣除，图片就会整体偏移——看起来像“对不齐”。
实操建议：
- 给画廊容器（比如
.gallery）显式设padding: 0和border: none，或用box-sizing: border-box统一盒模型 - 确保该容器设置了
position: relative，否则子元素的absolute会往上找，可能落到body上，导致响应式失效 - 避免在容器上同时用
transform（如scale），它会创建新的定位上下文，干扰top/left的像素基准
边框美化图片时，box-shadow 比 border 更灵活
直接用 border 给图片加边框，会在缩放或 hover 放大时拉伸边框线，显得糊；而且纯色边框缺乏层次感。而 box-shadow 是渲染在图层上方的，不影响布局流，还能叠加多层、控制模糊度和偏移。
常见错误现象：用 border-radius + border 做圆角边框，结果边框不随图片圆角裁剪，出现直角硬边。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一用
box-shadow: 0 0 0 4px #fff, 0 0 0 8px #e0e0e0模拟双层边框，比两个border更可控 - hover 时改
box-shadow而非border-width，避免重排（reflow） - 若必须用
border，记得配overflow: hidden在父容器上，防止圆角溢出
响应式画廊中，position: absolute 配合 transform: translate() 才能精准居中
只靠 top: 50%; left: 50% 会让元素左上角落在中心点，图片本身会偏右下。尤其在 flex 或 grid 布局里混用绝对定位时，这个偏移会被放大。
使用场景：你有一组等宽高图片，想在容器内居中堆叠（比如焦点图切换），或做悬停浮层效果。
实操建议：
- 固定写法：
top: 50%; left: 50%; transform: translate(-50%, -50%) - 不要用
margin负值模拟居中——图片尺寸变化时需同步改 margin，维护成本高 - 如果画廊容器高度不固定（比如由图片撑开），
top: 50%可能失效，此时应改用display: flex+align-items/justify-content作为主方案，absolute仅用于装饰层
IE11 下 box-shadow 和 transform 同时用会模糊？关掉硬件加速
IE11 对复合图层渲染不稳定，当图片同时有 transform（如 scale(1.05)）和多层 box-shadow 时，边缘会出现半像素模糊或闪烁，尤其在缩放动画中明显。
性能影响：强行开启 -ms-transform: translateZ(0) 会触发 GPU 加速，但在 IE11 上反而增加内存占用，且不一定解决模糊。
实操建议：
- 针对 IE11 单独写 hack：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { ... }，把box-shadow降级为单层border - 避免在
:hover中同时触发动画和阴影变化，拆成两步：先transform，再用transition-delay延迟阴影变化 - 如果项目必须兼容 IE11，优先用
outline+outline-offset替代外阴影，它更稳定
画廊布局真正难的不是怎么摆图片，而是当你要加 hover 动效、响应式缩放、多层阴影、还要兼容老浏览器时，这些 CSS 层叠规则和渲染机制会突然咬你一口——往往就卡在某个没写 box-sizing 或漏了 transform 补偿的细节上。
