PHP求和面板点击失效：第二次操作无法点击输入/提交面板

问题根源 #

1. z-index属性仅对**设置了position（值为relative/absolute/fixed/sticky）**的元素生效，你之前给<input>加了z-index但没指定定位，等于白设。
2. 求和结果的.result是绝对定位元素，会脱离文档流覆盖在表单上方，拦截了点击事件，导致输入框和按钮无法被点击。

修复方案（二选一即可） #

方案一：调整层级关系

给表单元素添加定位属性，确保z-index生效，同时降低结果元素的层级：

<h1>SUM</h1>

<style>
  .circle {
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: white;
    color:white;
    text-align: center;
    line-height: 100px;
    font-size: 16px;
    text-decoration: none;
    position: relative;
    z-index: 1;
  }
  #input1{
    width: 30%;
    position: relative; /* 添加定位，让z-index生效 */
    z-index: 100;
  }
  #submit1{
    position: relative; /* 添加定位，让z-index生效 */
    z-index: 100;
  }
  .result {
    font-size: 30px;
    color: blue;
    text-align:center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0; /* 降低层级，避免遮挡表单 */
  }
</style>

<div class="circle">
  <form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input id='input1'  type="number" name="number" placeholder="100">
    <input id='submit1' type="submit" value="submit">
  </form>
  
  <?php
  if(isset($_GET['number'])) {
    $total = 0;
    for ($i = 0; $i <= $_GET['number']; $i++) {
      $total += $i;
    }
    echo "<div class='result'>{$total}</div>";
  }
  ?>
</div>

方案二：调整结果元素位置

直接把结果移到圆形区域外面，从根源避免遮挡：

.result {
    font-size: 30px;
    color: blue;
    text-align:center;
    position: absolute;
    top: 160px; /* 移到圆形下方 */
    left: 50%;
    transform: translateX(-50%);
    z-index:1;
}

内容的提问来源于stack exchange，提问作者一萬次悲傷