position属性本身未变，变化的是布局逻辑：现代开发优先用Flex/Grid主动控制图像位置，position退为辅助；sticky是真正新增的定位模式，需设top/bottom且父容器不能有overflow:hidden或transform。
position 属性没变，但用法和搭配逻辑升级了
HTML5 本身不定义定位属性，position 仍是 CSS 的能力，所谓“新版变化”其实是开发者对布局理解的演进——过去靠 float + position: absolute 硬凑，现在更依赖 display: flex 和 display: grid 主动控制图像位置，position 反而退为辅助角色。浏览器对 position: sticky 的支持已全覆盖（Chrome 56+、Firefox 59+、Safari 15.4+），这是真正新增的可用定位模式。
图像居中/精确定位，优先用 Flex 而非 top/left
直接给 设 position: absolute 再配 top: 50%; left: 50%; transform: translate(-50%, -50%) 虽然能居中，但需确保父容器已设 position: relative，且容易因祖先元素未定位而“飞到页面左上角”。更稳的做法是让父容器承担定位责任：
div.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.image-container img {
max-width: 100%;
max-height: 100%;
}
这样图像始终在容器内居中，不依赖偏移值，也不破坏文档流。
sticky 定位真香，但图像用它得加限制条件
position: sticky 表现像 relative 和 fixed 的混合体，适合做“滚动时吸顶”的图示说明或图文锚点。但它对图像生效的前提是：必须设置一个有效的阈值偏移（如 top: 10px），且父容器不能有 overflow: hidden 或 transform（否则会创建新的层叠上下文，导致 sticky 失效）。常见翻车现场：
