html把div放在z轴上的td标签之间

我有一个表格，但我想把我的div标签放在另一个表格的前面，但在另一个表格的后面。我想提出的股利id为“背景下” id为“TD1”，并与id为“菜单中的” TD的TD背后，一切应该是DIVhtml把div放在z轴上的td标签之间

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

来源

2017-03-09 Tyler Silva

这是无效的HTML。只有''或''可以是'' – j08691

由于@ j08691表示将表格行标记放在无效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; 
 
\t \t 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 
 
\t \t \t \t </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>

股利一直放在上面摆放使用的z-index和位置的一切。

这是你之后？

来源

2017-03-10 00:47:21 Syfer

关闭的孩子，我希望它高于除菜单和徽标以外的所有内容（td标签带有“td1”和“菜单”） –

给表格zindex为99，并在第一个表格的后面添加另一个表格与表格内的其余内容。这应该解决它。 – Syfer

你是否设法让它工作？ – Syfer

html把div放在z轴上的td标签之间

回答

相关问题