调整浏览器窗口大小时如何避免HTML网页内容出现重叠问题

问题定位 #

重叠问题完全由你代码里的固定值负margin导致，你没有通过合理的布局结构来排列元素，反而用固定的负偏移量强制定位，窗口尺寸变化后偏移量和元素实际高度不匹配，就会出现重叠。

具体修复方案 #

• 顶部巴哥图重叠修复
  你当前把标题、按钮和巴哥图分成了两个独立的区块，靠.placeholder {margin-top:-250px}把图片拉到标题右侧，窗口缩窄标题换行变高后，图片上移的250px不足以让它停在顶部深色区域，就会掉到下方内容区重叠。
  你可以把<div class="main-content">、顶部Sign-Up按钮、<div class="placeholder">都放到同一个父容器，给父容器加display: flex、justify-content: space-between、align-items: center、background-color:#1f2937、padding: 0 150px 100px，直接实现左侧文本右侧图片的布局，删掉.placeholder的所有margin、padding属性。

• 底部Sign-Up按钮重叠修复
  你给.call类写了margin-top:-50px、margin-right:300px来强制定位按钮，窗口缩窄后左侧文本换行高度超过50px就会和按钮重叠。
  你可以给.call-to加display:flex、align-items:center、justify-content:space-between，删掉.call的margin-top、margin-right属性即可。

• 额外冗余代码清理
  ul的margin-top:-80px也是不合理的硬定位，你可以把头部logo和导航栏放到同一个flex容器，设置justify-content: space-between就能实现logo居左、导航居右的效果，无需负margin。

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