在页眉后面显示下拉菜单

Question

我目前正试图在我的个人网站顶部创建一个导航栏。在使下拉菜单可见的动画中，它从屏幕顶部向下平移，经过整个导航栏的前面。我希望下拉菜单在整个标题后面呈现，这样在向下平移时就不会覆盖任何内容。

我在下面包含了一个代码片段，显示了正在发生的事情(CSS略有简化，但基本相同(。

我已经尝试了z-index和position属性的许多组合，但还无法获得要在标头后面呈现的下拉菜单。根据我所看到的，.dropdown-content上的负z-index允许它堆叠在nav后面，但决不能堆叠在header后面。我可以对这种行为做些什么改变吗？

还要注意，对于header需要正的z-index，因为它具有positioning: sticky；若并没有它，我的站点中的其他元素将显示出它的超高。

body {
background-color: navy;
}
header {
z-index: 10;
top: 0;
position: sticky;
background-color: #141414de;
color: #fff;
}
nav {
display: inline-block;
text-align: left;
margin: 0 auto;
min-width: 50%;
}
nav a, nav button {
transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
display: inline-block;
color: #858585;
text-decoration: none;
padding: 20px 5px;
margin: 0 10px;
border: none;
border-top: 3px solid transparent;
background-color: transparent;
font-size: 1rem;
}
nav a.active {
color: #fff;
border-top: 3px solid #afafaf;
}
nav>a:not(.active):hover {
color: #ffffff;
border-color: #686868;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
z-index: -10;
display: block;
visibility: hidden;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
transition: transform 1s ease-in-out, visibility 1s ease-in-out;
transform: translateY(-200%);
}
.dropdown:hover .dropdown-content {
visibility: visible;
transform: translateY(0);
}

<header>
<nav>
<a href="index.html" class="active">Home</a>
<div class="dropdown">
<button>About</button>
<div class="dropdown-content">
<a href="about.html#education">Education</a>
<a href="about.html#experience">Experience</a>
<a href="about.html#skills">Skills</a>
</div>
</div>
<a href="contact.html">Contact</a>
</nav>
</header>

Answer 1

我昨天也遇到了同样的问题！我发现了以下解决方案。

我们需要将视觉样式与位置样式分开。通过在标题中添加position，可以将该元素按堆叠顺序向前拉，从而防止z索引显示在其后面。

为了纠正这种情况，我们只需要添加一个额外的包装器来分离视觉样式和位置样式。

body {
background-color: navy;
}
header {
z-index: 10;
top: 0;
position: sticky;
/* Removed visual styles and left only positional styles */
}

/* Moved visual styles to the new wrapper div */
.header-style {
background-color: #141414de;
color: #fff;
}
nav a, nav button {
transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
display: inline-block;
color: #858585;
text-decoration: none;
padding: 20px 5px;
margin: 0 10px;
border: none;
border-top: 3px solid transparent;
background-color: transparent;
font-size: 1rem;
}
nav a.active {
color: #fff;
border-top: 3px solid #afafaf;
}
nav>a:not(.active):hover {
color: #ffffff;
border-color: #686868;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
z-index: -1; /* Set Z-Index to be more reasonable */
display: block;
visibility: hidden;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
transition: transform 1s ease-in-out, visibility 1s;
transform: translateY(-200%);
}
.dropdown:hover .dropdown-content {
visibility: visible;
transform: translateY(0);
}

main {
background-color: #141414de;
color: white;
margin-top: 1em;
padding: 0.5em;
}

p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}

<header>
<!-- New Wrapper Div Added -->
<div class="header-style">
<nav>
<a href="index.html" class="active">Home</a>
<div class="dropdown">
<button>About</button>
<div class="dropdown-content">
<a href="about.html#education">Education</a>
<a href="about.html#experience">Experience</a>
<a href="about.html#skills">Skills</a>
</div>
</div>
<a href="contact.html">Contact</a>
</nav>
</div>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas rhoncus nulla. Phasellus sed justo non diam pretium sagittis sit amet sit amet lectus. Ut tempus lectus in egestas scelerisque. Cras in lobortis dui, a interdum lacus. Praesent rhoncus feugiat libero id iaculis. Maecenas eu erat at ex auctor consequat sit amet et arcu. Morbi et mauris vel ipsum molestie venenatis. Cras luctus cursus ex non porttitor. Etiam at euismod nunc, eu maximus libero. Sed et nisi et ex consequat vestibulum vitae at nisi. Quisque mollis dui nec turpis efficitur imperdiet. Suspendisse sed metus ut dolor ornare dapibus. Etiam eu nulla ut dui rhoncus viverra et sit amet magna. Suspendisse vel nulla non nisl euismod scelerisque vel eget velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas rhoncus nulla. Phasellus sed justo non diam pretium sagittis sit amet sit amet lectus. Ut tempus lectus in egestas scelerisque. Cras in lobortis dui, a interdum lacus. Praesent rhoncus feugiat libero id iaculis. Maecenas eu erat at ex auctor consequat sit amet et arcu. Morbi et mauris vel ipsum molestie venenatis. Cras luctus cursus ex non porttitor. Etiam at euismod nunc, eu maximus libero. Sed et nisi et ex consequat vestibulum vitae at nisi. Quisque mollis dui nec turpis efficitur imperdiet. Suspendisse sed metus ut dolor ornare dapibus. Etiam eu nulla ut dui rhoncus viverra et sit amet magna. Suspendisse vel nulla non nisl euismod scelerisque vel eget velit.</p>
</main>

通过这样做，您就拥有了header元素，它允许粘性定位，与包含所有样式的静态元素完全分离。现在，在静态元素中，您可以拥有下拉菜单，并允许它出现在页眉后面。