小屏访问或窗口尺寸较小时，页面按钮与标题发生元素重叠问题求助

问题根源 #

• 按钮容器.x2使用position: absolute绝对定位，完全脱离正常文档流，定位基准为整个视口的正中心
• 顶部标题块属于正常文档流元素，当小屏视口高度较小时，视口正中心的纵向位置刚好落在顶部标题块的覆盖区间，必然会出现层叠重叠
• 原代码存在多处规范问题：<center>标签未闭合、使用已废弃的<center>标签与硬编码<br>撑间距、按钮类名首字母大写，若引入样式库会导致类名匹配失败，按钮样式失效

核心修复步骤 #

1. 重构布局逻辑，移除脱离文档流的绝对定位，使用弹性盒实现全页面的纵向居中，让顶部标题、按钮块都处于同一正常文档流中，从根源上避免跨元素重叠
   替换原有CSS代码为：

   * {
     box-sizing: border-box;
     margin: 0;
   }
   body {
     font-family: Arial, Helvetica, sans-serif;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   .header-block {
     width: 100%;
     background-color: #E9ECEF;
     padding: 2rem 1rem;
     text-align: center;
   }
   
   .x2 {
     text-align: center;
     padding: 3rem 1rem;
     width: 100%;
     max-width: 300px;
   }
   /* 适配触屏点击的按钮样式 */
   .x2 p {
     margin: 0.8rem 0;
   }
   .x2 button {
     width: 100%;
     min-height: 44px;
   }
   

2. 重构HTML结构，替换废弃标签、补全标签闭合：

   <!-- 加入全站适配必需的视口元标签，避免手机端默认缩放导致错位 -->
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <div class="header-block">
       <h1>Survey Management System</h1>
     </div>
   
     <div class="x2">
       <p><button class="btn btn-warning" onclick="document.location = 'user/registration.html'">Register</button></p>
       <p><button class="btn btn-warning" onclick="document.location = 'user/Login1.html'">Login</button></p>
       <p><button class="btn btn-warning" onclick="document.location = 'admin/alogin.html'">Admin Login</button></p>
     </div>
   </body>
   

额外优化建议 #

• 移除元素上的硬编码间距：用CSS的padding、margin替代<br>标签撑间距，不同屏幕尺寸下的布局稳定性更强
• 所有样式统一抽离到独立CSS文件，不要在HTML元素上直接写内联样式，降低后期维护成本
• 按钮跳转逻辑可以从内联onclick属性抽离到独立的JS事件块中，后续调整跳转路径时不需要逐个修改HTML元素
• 小屏端为按钮设置统一的最小点击热区（不小于44px*44px），符合移动端触屏操作的交互规范

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