页面第二个表单文本框无法输入的原因排查求助

嘿，我找到你第二个表单输入框无法输入的核心原因啦！

问题根源：元素重叠遮挡 #

你的第一个表单里的.title1元素用了position: relative; bottom: 430px，这个设置让它向上大幅移动后，直接覆盖在了第二个表单的上方。当你尝试点击第二个表单的输入框时，实际上点到的是上层的.title1元素，自然无法激活输入框。

相对定位的特性是：元素会保留原本在文档流中的位置，同时可以通过top/bottom/left/right调整显示位置，但移动后的元素会默认处于其他元素的上层（除非手动设置z-index）。你的.title1向上移动后，刚好完全覆盖了下方的#report表单区域，导致输入框被“挡住”了。

修复方案 #

方案1：快速调整标题布局（立即可用）

把.title1从第一个表单内部移出来，同时修改样式避免极端定位：

1. 调整HTML结构：

<!--form for top level info-->
<div id = "tl">
<form>
<div class = "inputs">
<div class="fdate">
<label for="fdate">Date:</label>
<input type="text" id="fdate" name="fdate"><br><br>
</div>
<div class="fsales">
<label for="fsales">Sales Order:</label>
<input type="text" id="fsales" name="fsales"><br><br>
</div>
<div class="fservice">
<label for="fservice">Service Order:</label>
<input type="text" id="fservice" name="fservice"><br><br>
</div>
<div class="fpart">
<label for="fpart">Part Number:</label>
<input type="text" id="fpart" name="fpart"><br><br>
</div>
<div class="fqty">
<label for="fqty">Quantity:</label>
<input type="text" id="fqty" name="fqty"><br><br>
</div>
<div class="fhour">
<label for="fhour">Hours:</label>
<input type="text" id="fhour" name="fhour"><br><br>
</div>
<div class="fcust">
<label for="fcust">Customer:</label>
<input type="text" id="fcust" name="fcust"><br><br>
</div>
<div class="fname">
<label for="fname">Name:</label>
<input type="text" id="fname" name="fname"><br><br>
</div>
</div>
</form>
</div>
<!-- 将标题移到第一个表单外部 -->
<div class = "title1">
<div> Missing & Damaged Report</div>
</div>
<!--second form for missing parts-->
<div id = "report">
<form>
<div class="P1">
<label for="P1">Part Number:</label>
<input type="text" id="P1" name="P1"><br><br>
</div>
</form>
</div>

2. 更新.title1的CSS样式：

.title1{
  text-align: center;
  margin: 2rem 0;
  text-transform: uppercase;
  font-weight: bold; /* 可选，让标题更醒目 */
}

方案2：重构第一个表单布局（更稳定）

你现在用大量position: relative排列输入框，这种方式很容易出现布局混乱和重叠问题。推荐用CSS Grid重构，让布局更可控：

修改.inputs的CSS样式：

.inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 分成4列均匀分布 */
  gap: 2rem; /* 列与列、行与行之间的间距 */
}

然后删掉所有.fdate、.fsales等元素的position相关样式，输入框会自动整齐排列，彻底避免定位带来的各种问题。

验证修复 #

修改后刷新页面，你会发现第二个表单的输入框可以正常点击输入了，同时整体布局也会更整洁稳定。

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