不能直接用 position: absolute 做位置卡片，因其无法解决地图联动、响应式偏移和 z-index 层级混乱；真正可行方案是容器约束 + 坐标映射 + 容器内相对定位三者配合。
直接用 position: absolute 做“位置卡片”是常见误解——它只解决定位，不解决地图联动、响应式偏移、z-index 层级混乱这些真问题。真正可用的位置卡片，得靠容器约束 + 坐标映射 + 容器内相对定位三者配合。
为什么不能直接用 absolute 叠在地图图片上
很多人把地图当背景图，再用 absolute 把卡片硬塞上去，结果一缩放、一换屏、一换设备，卡片就飘到隔壁省去了。根本原因是：像素坐标和地理坐标没对齐，且没监听容器尺寸变化。
- 地图图片本身可能被
max-width: 100%拉伸，但absolute卡片的left/top还按原始宽高算 - 移动端视口缩放（如双指放大）会改变实际渲染像素，但 CSS 像素值不变，卡片就“失准”
- 多个卡片共存时，
z-index很容易被父容器的transform或will-change截断，导致点不中
用 relative 容器 + absolute 卡片的最小可行结构
核心不是“怎么定位”，而是“定位基准在哪”。必须让卡片的 left/top 值始终相对于当前可见地图区域计算。
- 外层容器设
position: relative，并显式声明width和height（不能只靠内容撑开） - 地图图片或地图组件作为第一个子元素，设
width: 100%; height: 100%，不设position - 每个位置卡片作为子元素，用
position: absolute，left和top值按比例算：比如地图宽 800px，某点 X=200px →left: 25% - 卡片自身加
transform: translate(-50%, -50%)实现居中锚点，避免依赖固定宽高
<div class="map-container"> <img src="map.png" alt="map"> <div class="location-card" style="left: 25%; top: 30%;">A点</div> <div class="location-card" style="left: 70%; top: 65%;">B点</div> </div>
响应式下保持坐标准确的两个关键动作
纯 CSS 无法动态重算百分比，所以得靠 JS 轻量干预——但不必引入地图 SDK，几行就够了。
立即学习“前端免费学习笔记（深入）”；
- 监听
resize和orientationchange，重新计算容器宽高，然后批量更新所有卡片的style.left/style.top - 给每个卡片加
data-x和data-y存原始像素坐标（例如data-x="200" data-y="240"），运行时读取容器当前clientWidth/clientHeight，再做比例换算 - 避免用
getBoundingClientRect()频繁读取，它触发重排；改用缓存容器尺寸 +requestAnimationFrame批量更新
点击穿透与层级断裂的典型修复点
卡片点不了、hover 失效、地图拖拽时卡片卡住——八成是层级或 pointer-events 搞错了。
- 确保地图图片/容器没设
pointer-events: none（否则事件穿过去了） - 卡片自身设
pointer-events: auto（默认是 auto，但父层若设了none会继承） - 如果用了
transform: scale()缩放地图，卡片必须同级或更高层，不能套在被缩放的容器里，否则坐标系会畸变 - 安卓 WebView 下，
position: absolute卡片有时被硬件加速层截断，加backface-visibility: hidden或临时加translateZ(0)可缓解
最麻烦的不是写代码，而是坐标数据来源是否可靠。手标 PNG 上的像素点，和导出 SVG 的 viewBox 值，和 Leaflet 的经纬度转像素函数，三者结果可能差 3–5px —— 这个误差在小屏上就是点不中的全部原因。
