本文讲解如何通过合理使用 css 定位与布局机制，彻底解决图片缩放时带动文字位移的问题，核心在于分离容器与内容的定位逻辑，并采用响应式图像控制策略。
在初学网页开发时，一个常见误区是：对元素（如 .wrd-box 和 .image2）同时使用 position: relative 并依赖 top/left/transform 进行“手动居中”，这会导致它们在文档流中仍相互影响——当 .image2 img 尺寸增大时，其父容器 .image2 高度随之变化，进而挤压或推移相邻的 .wrd-box，造成文字“被拖动”的视觉错觉。
根本解法不是强行固定文字位置（如 position: fixed 会脱离视口上下文，破坏响应性），而是解耦布局职责：让文字与图片各自拥有独立、稳定的布局上下文，互不侵占空间。
✅ 正确实践：容器与内容分离 + 响应式图像
首先，重构 CSS，明确区分容器样式（.image2）与图像样式（.image2 img）：
