移动端页面Div重叠、初始滚动位置异常问题求助

一、移动端元素重叠（以“Join with us”文本为例） #

• 统一全局盒模型：在CSS开头添加以下代码，避免元素因padding/border超出容器宽度引发重叠

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  

• 修正定位逻辑：如果“Join with us”使用了position: absolute，确保其父容器设置position: relative，同时通过媒体查询调整移动端的定位与尺寸：

  @media (max-width: 768px) {
    .join-us-text {
      position: relative; /* 或根据布局需求调整top/left值 */
      margin: 1rem 0;
      font-size: 1.2rem; /* 缩小移动端字体避免溢出 */
    }
  }
  

• 排查布局冲突：若父容器使用Flex布局，添加flex-wrap: wrap确保子元素在移动端自动换行；若使用浮动布局，给父容器加overflow: hidden清除浮动，防止元素错位。

二、页面初始加载显示底部 #

• 移除自动聚焦设置：检查页面内input、button等元素是否设置了autofocus属性，直接移除或设置autofocus="false"。
• 强制滚动到顶部：在HTML末尾添加原生JS代码，确保页面加载后自动回到顶部：

  window.addEventListener('DOMContentLoaded', function() {
    window.scrollTo(0, 0);
  });
  

• 修正高度设置：确保html和body的高度配置合理，避免容器高度异常导致滚动偏移：

  html, body {
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: auto; /* 取消可能引发异常的平滑滚动设置 */
  }
  

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