如何让新增表格行覆盖表单且不使用position:absolute？

我有一个表格，每次点击“submit”按钮时都会向其中添加行。

目标：希望新增的表格行能够覆盖在表单元素上方，将表单遮盖。
当前问题：目前新增的行只会将表单和按钮向下推动，z-index属性无法生效。

我已经设置了：

• position: relative
• 正确设置了z-index
• 堆叠上下文看似也正常

如何在不使用position: absolute的情况下实现这个需求？我知道position: absolute会让元素脱离文档流，但这会改变布局，因此我不想使用该属性。我已经查阅资料和教程，但没有找到解决方案。

现有代码 #

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
   
    <table id="myTable">
      <thead>
       <tr>
        <th>Name</th>
        <th>Number</th>
       </tr>
    </thead>
    <tbody>

    </tbody>
    </table>

    <form>
      <label for="fName">Name</label><br />
      <input type="text" id="fName" name="fName" /><br />
      <input type="submit" id="submitBtn" />
    </form>
 
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

CSS

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

table {
  color: red;
  width: 200px;
  padding: 15px;
  margin: 15px;
  border-collapse: collapse; 
  position: relative;
  z-index: 1;
}

thead{
  border: solid 3px blue;
}

.tr{
  border-bottom: solid 1px black;
  color: green;
}

form{
  position: relative;
  z-index: 0;
}

JavaScript

"use strict";

let inputBox = document.querySelector("#fName");
let tBody = document.querySelector("tbody");

function addRow() {
  let row = tBody.insertRow(0);
  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  cell1.innerHTML = inputBox.value;
  cell2.innerHTML = "text2";
  inputBox.value = " ";
  row.classList.add('tr');
}

document.querySelector("#submitBtn").addEventListener("click", function (event) {
    event.preventDefault();
    addRow();
});

解决方案 #

要实现新增行覆盖表单且不脱离文档流的效果，可以通过负margin+背景色结合z-index来实现，具体修改如下：

修改后的CSS

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

table {
  color: red;
  width: 200px;
  padding: 15px;
  margin: 15px;
  border-collapse: collapse; 
  position: relative;
  z-index: 1;
}

thead{
  border: solid 3px blue;
}

.tr{
  border-bottom: solid 1px black;
  color: green;
  background: white; /* 添加背景色，遮盖下方表单内容 */
}

tbody {
  margin-bottom: -40px; /* 负margin让tbody向上收缩，数值根据行高调整 */
}

form{
  position: relative;
  z-index: 0;
}

核心逻辑说明

1. 负margin调整位置：给tbody设置负的margin-bottom，让表格的行向上移动，进入表单所在的区域，这样新增的行就会覆盖在表单上方。
2. 背景色遮盖内容：给表格行添加背景色（和页面背景一致即可），避免表单内容透过行显示出来。
3. 保持z-index层级：维持表格z-index高于表单的设置，确保表格的堆叠层级优先于表单。

替代方案：使用transform

如果不想用负margin，也可以用transform: translateY()来移动tbody，同样不会改变文档流：

tbody {
  transform: translateY(-40px); /* 数值根据行高调整 */
}

注意：需要根据实际行高调整负margin或translateY的数值，确保刚好覆盖表单区域。

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