html - 粘性导航显示在叠加层上方
问题描述
我的页面左侧有一个垂直的粘性导航,还有一个带有下拉菜单的顶部标题,当其中一个项目被下拉时,当我有时,棒式导航显示在下拉列表的顶部z-index: 0
,当我更改z-index: -1
然后导航显示在下拉列表下,但链接不再可点击。
我尝试将z-index
of更改.sub-content
为非常高的值,但它仍然显示在顶部。
我该怎么做才能使粘性导航显示在叠加层下方,但仍然可以点击项目?
这是相关的CSS:
nav.right>ul {
overflow: auto;
list-style: none;
margin-left: 0;
padding-left: 0;
height: calc(100vh - 80px);
position: sticky;
z-index: 0;
top: 60px;
}
可点击,但显示在叠加层上方z-index: 0
:
nav.right>ul {
overflow: auto;
list-style: none;
margin-left: 0;
padding-left: 0;
height: calc(100vh - 80px);
position: sticky;
z-index: 0;
top: 60px;
}
a { color: skyblue; }
main {
display: flex;
margin: auto;
}
main>nav {
width: 20%;
}
main {
width: 80%;
padding-left: 20px;
}
.sub-content>div>ul {
list-style-type: none;
}
.sub-content {
position: absolute;
left: 0;
right: 0;
padding: 0;
display: none;
background: #292929;
padding: 5vh 0;
}
.sub-content>div:first-child {
width: 25vw;
position: relative;
left: 0;
right: 0;
margin: auto;
}
nav.top>ul>li:hover>.sub-content {
display: block;
}
.sub-content>div>ul>li>a {
color: #ffffff;
padding: 5px 10px;
font-size: 0.9rem;
text-decoration: none;
display: block;
}
.sub-content>div>ul>li>a:hover {
/* background: #ee2012; */
text-decoration: underline;
}
nav.top {
background: #f44336;
display: flex;
flex-direction: row;
justify-content: center;
position: sticky;
top: 0;
}
nav.top>ul {
margin: 0;
display: flex;
flex-direction: row;
list-style-type: none;
}
nav.top>ul>li>a {
display: inline-block;
padding: 1rem 1.5rem;
color: #ffffff;
text-decoration: none;
}
nav.top>ul>li>a:hover,
nav.top>ul>li>a.router-link-exact-active {
background: #ee2012;
}
<nav class="top">
<ul>
<li>
<a href="">Item</a>
<div class="sub-content">
<div>
<ul>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<main>
<nav class="right">
<ul>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
</ul>
</nav>
<div class="content">
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
</div>
</main>
不可点击,但显示在叠加层下z-index: -1
:
nav.right>ul {
overflow: auto;
list-style: none;
margin-left: 0;
padding-left: 0;
height: calc(100vh - 80px);
position: sticky;
z-index: -1;
top: 60px;
}
a { color: skyblue; }
main {
display: flex;
margin: auto;
}
main>nav {
width: 20%;
}
main {
width: 80%;
padding-left: 20px;
}
.sub-content>div>ul {
list-style-type: none;
}
.sub-content {
position: absolute;
left: 0;
right: 0;
padding: 0;
display: none;
background: #292929;
padding: 5vh 0;
}
.sub-content>div:first-child {
width: 25vw;
position: relative;
left: 0;
right: 0;
margin: auto;
}
nav.top>ul>li:hover>.sub-content {
display: block;
}
.sub-content>div>ul>li>a {
color: #ffffff;
padding: 5px 10px;
font-size: 0.9rem;
text-decoration: none;
display: block;
}
.sub-content>div>ul>li>a:hover {
/* background: #ee2012; */
text-decoration: underline;
}
nav.top {
background: #f44336;
display: flex;
flex-direction: row;
justify-content: center;
position: sticky;
top: 0;
}
nav.top>ul {
margin: 0;
display: flex;
flex-direction: row;
list-style-type: none;
}
nav.top>ul>li>a {
display: inline-block;
padding: 1rem 1.5rem;
color: #ffffff;
text-decoration: none;
}
nav.top>ul>li>a:hover,
nav.top>ul>li>a.router-link-exact-active {
background: #ee2012;
}
<nav class="top">
<ul>
<li>
<a href="">Item</a>
<div class="sub-content">
<div>
<ul>
<li><a href="">Sub Item</a></li>
<li><a href="">Sub Item</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<main>
<nav class="right">
<ul>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
<li><a href="">Abc</a></li>
</ul>
</nav>
<div class="content">
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
</div>
</main>
解决方案
推荐阅读
- asp.net-mvc - TempData 在发布到 Azure 时不起作用
- vba - VBA:将一个集合附加到另一个集合上,例如 VB.NET 中的“.AddRange”
- cassandra - 为什么即使指定了主键,Cassandra 也不允许对没有二级索引的列进行查询/过滤
- macros - 如何为所有数值变量设置缺失值
- docker - Docker:如何获取现有容器的完整容器 ID?
- atom-editor - Atom 编辑器中的 Atom Beautify 包快捷方式/热键不起作用
- sql-server - SQL 删除查询。100000 行要删除
- moodle-api - Moodle API 可选返回值
- javascript - 在我的 Chrome 扩展程序中,Thumbs.db 是什么,我可以删除它吗?
- xslt - 从属性节点和文本中删除前导 X