how to make new rows added to table go on top of other element with z-index

I have a table which I add rows to each time i press the 'submit' btn.

My goal: I want the rows thats being added to the table to go on top of the form element and cover it.

The problem : whats happening now is that the new rows thats being added just push down the form and the btn. the z-index wont take effect.

notice that the code has:

'position: relative'
z-index set properly

3.stack context seems properly too

How can i do this without using 'position: absolute'?

I know position absolute takes it out from the flow but it changes the layout so i rather not.

cant find solution anywhere though ive researched it and watched tutorials.

here is what i got:

<!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>

*{
  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;
}

"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();
  });

many thanks

Solution

I don't think you understand what exactly changing the z-index does quite yet. Changing the z index has nothing to do with the actual flow of elements—whether the elements have the same z index values or not, all it changes is the stacking order (i.e., how they overlap). Adding those new rows will expand the height of the table, naturally pushing the form farther down the page regardless of the z index values. It's not as if giving the form z-index: 0 actually puts it deeper into the screen and prevents the table from pushing it down.

If you want the table to overlap the form, you need to use absolute positioning. You can try wrapping the table and form in a <div> and using absolute positioning on the form to give it a set distance from the top of the div. That will fix it in place and allow the table to overlap it. Like this (shortened for brevity):

HTML

<body>
  <div class="container">
    <table id="myTable">
      <!-- ... -->
    </table>

    <form>
      <!-- ... -->
    </form>
  </div>

  <script src="index.js" charset="utf-8"></script>
</body>

CSS

.container {
  position: relative;
}

form{
  position: absolute;
  z-index: 0;
  top: 50px;
}

Though I am wondering why you would want the new table rows to cover the form element.