页脚开发中如何阻止窗口resize时元素发生位移？

你代码中.footer设置的固定值left: 300px是导致窗口缩放时元素位移的直接原因。position: relative搭配left属性是让元素基于自身正常布局位置偏移固定像素，这个偏移值不会跟随窗口宽度变化自适应，窗口缩小时就会出现元素越界、错位的问题。

修复方案 #

• 第一步：先删除.footer规则中的left: 300px属性，固定偏移的写法本身不支持响应式适配。
• 如果你需要实现页脚水平居中效果，给.footer设置宽度规则+margin: 0 auto即可，示例如下：

.footer {
    position: relative;
    /* 可根据需求替换为 max-width: 90% 实现自适应宽度 */
    width: 1200px;
    margin: 0 auto;
}

• 如果你需要实现页脚和页面其他内容左对齐，只要保证页脚的外层容器.pdiv和页面其他内容的外层容器使用完全一致的宽度、水平居中规则即可，不需要额外设置偏移。
• 如果你之前尝试float: left是为了实现页脚内部多列布局，只需要给页脚的内部子元素设置浮动即可，不要给页脚外层加浮动，同时记得设置清除浮动规则避免高度塌陷。

内容的提问来源于stack exchange，提问作者autonomous