html 在 z 轴上的 td 标签之间放置一个 div

Question

我有一张 table ，但我也想将我的 div 标签放在同一张 table 的前面，但放在另一张 table 的后面。我想把id为“backDrop”的div放在id为“td1”的td后面，id为“menu”的td，其他的都应该在div后面

<table style="width:100%;border-collapse:collapse">
  <tr style="z-index:1">
    <td style="width:91.0vw;" id="header">
      <h1>Tyler Silva E-Portfolio</h1>
    </td>
    <td  onclick="openNav()"id="td1" style="background-color:#3953a5;z-index:initial;">
      <img style="width:8vw;" id="logo" src="img/logo.png" onclick="openNav()"/>
    </td>
    <div id="backDrop" style="opacity:0" onclick="alert('hello')"></div>
  </tr>

  <tr>
    <td>
      <!--body-->
      <h1 style="color:white">
        hello world
    </td>

    <td id="nav" rowspan="2">
      <div id="menu"><p>M<br />E<br />N<br />U<br /></p></div>
    </td>
  </tr>

  <tr>
    <td><!--footer--></td>
  </tr>
</table>

我的CSS是

body
{
margin:0;
background-color:#55505c;
}

#header
{
    height:8vw;
    width:100%;
    background-color:#77b6ea;
    z-index:-1
}

h1
{
    font-family:georgia;
    font-size:3vw;
    margin-top:1.5vw;
}

#logo
{
vertical-align:top;
    padding:0;

}
td
{
    padding:0
}

#nav
{
    position:relative;
    height:100vh;
    background-color:#3953a5;
    font-size:8vw;
    z-index:100000;
}

#backDrop
{
    position:fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    background-color:black;
    z-index:initial;
    opacity:0;
}

Answer 1

正如@j08691 所说，将 div 放在无效 HTML 中的表格行标记之间。你所追求的是这样的:

body
{
margin:0;
background-color:#55505c;
}

#header
{
    height:8vw;
    width:100%;
    background-color:#77b6ea;
    z-index:-1
}

h1
{
    font-family:georgia;
    font-size:3vw;
    margin-top:1.5vw;
}

#logo
{
vertical-align:top;
    padding:0;

}
td
{
    padding:0
}

#nav
{
    position:relative;
    height:100vh;
    background-color:#3953a5;
    font-size:8vw;
    z-index:100000;
}

#backDrop
{
    position:fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    background-color:black;
    z-index:99;
    opacity:0;
		border:1px solid #ffffff;
}

<div id="backDrop" style="opacity:0" onclick="alert('hello')"></div>
<table style="width:100%;border-collapse:collapse">
  <tr>
    <td style="width:91.0vw;" id="header">
      <h1>Tyler Silva E-Portfolio</h1>
    </td>
    <td  onclick="openNav()"id="td1" style="background-color:#3953a5;z-index:initial;">
      <img style="width:8vw;" id="logo" src="img/logo.png" onclick="openNav()"/>
    </td>
    
  </tr>

  <tr>
    <td>
      <!--body-->
      <h1 style="color:white">
        hello world
				</h1>
    </td>

    <td id="nav" rowspan="2">
      <div id="menu"><p>M<br />E<br />N<br />U<br /></p></div>
    </td>
  </tr>

  <tr>
    <td><!--footer--></td>
  </tr>
</table>

div 已使用 z-index 和位置放置在所有内容之上。

这就是你想要的吗？