我的下拉菜单卡在主 div 后面或被困在标题内。我搞乱了 z-index，但这没有帮助。我如何才能知道是标题捕获了它，还是主 div 隐藏了它。
这是问题的图片:
body {
margin: 0;
font-family: arial;
}
button {
border-style: solid;
border-color: black;
border-radius: 5px;
}
a {
text-decoration: none;
color: blue;
}
#header {
overflow: hidden;
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection {
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.headerSection>.headerItem {
display: table-cell;
vertical-align: middle;
}
#asdf {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover {
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main {
margin-top: 55px;
z-index: 1;
}<div id="header">
<div class="headerSection">
<div class="dropdown">
<button class="headerItem" id="asdf">☰</button>
<div class='TOC'>
<a href='#OS'>OS Information</a>
<a href='#GI'>General Information</a>
<a href='#DI'>Domain Information</a>
<a href='#SUC'>Start-Up Command</a>
<a href='#shares'>Shares</a>
<a href='#EV'>Environment Vars</a>
<a href='#proc'>Processes</a>
</div>
</div>
</div>
<div class="headerSection">
<h1 class="headerItem">Windows Audit Script Report</h1>
</div>
<div class="headerSection">
<p class="headerItem" id="aede">Run Time: 2018-06-28 10:11:24.145067</p>
</div>
</div>
<div id="main">
<div style='clear:both'></div>有人对如何解决此问题有任何想法吗？
最佳答案
发生这种情况是因为您的标题有溢出:隐藏，您应该删除溢出隐藏 请检查更改:
body
{
margin: 0;
font-family: arial;
}
button
{
border-style: solid;
border-color: black;
border-radius: 5px;
}
a
{
text-decoration: none;
color: blue;
}
#header
{
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection
{
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.hidden-height-header{width:66%; float:left; height:50px; overflow:hidden}
.hidden-height-header >.headerSection {width:50%}
.headerSection > .headerItem
{
display: table-cell;
vertical-align: middle;
}
#asdf
{
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover
{
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main
{
margin-top: 55px;
z-index: 1;
}<body>
<div id="header">
<div class="headerSection">
<div class="dropdown">
<button class="headerItem" id="asdf">☰</button>
<div class='TOC'>
<a href='#OS'>OS Information</a>
<a href='#GI'>General Information</a>
<a href='#DI'>Domain Information</a>
<a href='#SUC'>Start-Up Command</a>
<a href='#shares'>Shares</a>
<a href='#EV'>Environment Vars</a>
<a href='#proc'>Processes</a>
</div>
</div>
</div>
<div class="hidden-height-header">
<div class="headerSection">
<h1 class="headerItem">Windows Audit Script Report</h1>
</div>
<div class="headerSection">
<p class="headerItem" id="aede">Run Time: 2018-06-28 10:11:24.145067</p>
</div>
</div>
</div>
<div id="main">
<div style = 'clear:both'></div>
</div></body>关于html - 下拉菜单卡在 div 后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51090138/