<p>一个下拉式div元素，在移动视图中应该像这样工作，但在检查元素中却显示为移动视图。</p>
<p>我试过改变几乎所有相关导航元素的CSS z-index样式，将这个元素保留在“z-index:121212 !important;”，但下拉式div仍然出现在所有其他导航链接的后面。</p>
<p>有人知道为什么会发生这种情况吗？任何帮助将不胜感激。</p>
<p>这是我的HTML代码和它的CSS：</p>
<p>
<pre class="brush:css;toolbar:false;"> .navbar-mobile .dropdown>.dropdown-active {
display: block;
z-index: 121212;
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(--bg-dark);
min-width: 200px;
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
z-index: 101000;
animation: marketNav 0.5s;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover{
background-color: var(--main-color);
color: #000 !important;
}
.dropdown-content a:hover{
color: #1F586B;
}
.dropdown:hover .dropdown-content{
display: inline-block;
}
.nav-pills.has-two .nav-item .nav-link.active {
background-color: var(--main-color);
color: #000;
}
.nav-link{
font-weight: 600 !important;
letter-spacing: 0.8px;
}
@media screen and (min-width: 1024px) {
.support-link{
margin-right: 10px!important;
}
.nav-link{
padding-left: 25px!important;
}
}
.nav-pills.has-two .nav-item .nav-link {
background-color: #000 !important;
color: #fff;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
padding: 12px 20px;
}</pre>
<pre class="brush:html;toolbar:false;"><!-- Navigation -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center justify-content-lg-between">
<div class="logo me-auto me-lg-0">
<a href="index.htm">
<span>
<img class="img-fluid rounded sm-device-img text-align" src="asset/theme1/images/logo/logo.svg" width="100%" alt="pp">
</span>
</a>
</div>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li class="active">
<a class="nav-link" href="index.htm">Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">Market</a>
<div class="dropdown-content">
<a href="">Forex</a>
<a href="">Cryptocurrencies</a>
<a href="">Indices</a>
<a href="">Stocks</a>
<a href="">Commodities</a>
</div>
</div>
<div class="mobile-view marketNav">
<a href="">Forex</a>
<a href="">Cryptocurrencies</a>
<a href="">Indices</a>
<a href="">Stocks</a>
<a href="">Commodities</a>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">Trading</a>
<div class="dropdown-content">
<a href="">Trading Platforms</a>
<a href="">Tools</a>
<a href="">Education</a>
<a href="">benefits</a>
</div>
</div>
<div class="mobile-view marketNav">
<a class="sub-nav-link" href="">Trading Platforms</a>
<a class="sub-nav-link" href="">Tools</a>
<a class="sub-nav-link" href="">Education</a>
<a class="sub-nav-link" href="">benefits</a>
</div>
</li>
<li>
<a class="nav-link" href="">Account Types</a>
</li>
<li>
<a class="nav-link" href="">About</a>
</li>
<li>
<a class="nav-link" href="">Contact</a>
</li>
<li class="d-md-block d-lg-none d-block ">
<a class="nav-link" href="">Login</a>
<a class="btn-border-inverse col-12 btn-sm me-3" href="">Register</a>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<div class="header-right d-flex d-none d-md-none d-lg-block">
<a href="" class="btn-border btn-sm me-3">Login</a>
<a href="" class="btn-border-inverse btn-sm me-3">Register</a>
</div>
</div>
</header>
<!-- Navigation Ends --></pre>
</p>
<p><strong>编辑：</strong>我找到了解决这个问题的方法。当链接位于主要的“nav-links”后面时，它们无法被点击。所以我添加了一些高度的空白div，以出现在下拉式内容将出现的nav-link下方，借助一些JS和CSS使其在较大的屏幕上隐藏。现在我可以点击“dropdown-content”中的链接了。</p>
1
968
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
问题不在于 z-index，而在于背景颜色。它是透明的，所以看起来好像在其他文本的后面。你应该在代码中设置你使用的变量：
:root { --bg-dark: #000; --main-color: #fff; }