Z-indexを使用してドロップダウンコンテンツを一番上に配置するにはどうすればよいですか?
<p>モバイル ビューではこのように動作するドロップダウン div 要素ですが、inspect 要素ではモバイル ビューとして表示されます。 </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 {
表示ブロック;
z インデックス: 121212;
}
.dropdown-content {
表示: なし。
位置: 絶対;
背景色: var(--bg-dark);
最小幅: 200px;
ボックスシャドウ: 0px 10px 10px 0px rgba(0,0,0,0.2);
z インデックス: 101000;
アニメーション:marketNav 0.5秒;
}
.dropdown-content a {
色: #fff;
パディング: 12px 16px;
テキスト装飾: なし。
表示ブロック;
}
.dropdown-content a:hover{
背景色: var(--main-color);
色: #000 !重要;
}
.dropdown-content a:hover{
カラー: #1F586B;
}
.dropdown:ホバー .dropdown-content{
表示: インラインブロック;
}
.nav-pills.has-two .nav-item .nav-link.active {
背景色: var(--main-color);
色: #000;
}
.nav-link{
フォントの太さ: 600 !重要;
文字間隔: 0.8px;
}
@media screen and (min-width: 1024px) {
.サポートリンク{
マージン右: 10px!重要;
}
.nav-link{
パディング左: 25px!重要;
}
}
.nav-pills.has-two .nav-item .nav-link {
背景色: #000 !重要;
色: #fff;
境界半径: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
パディング: 12px 20px;
}</pre>
<pre class="brush:html;toolbar:false;"><!-- ナビゲーション -->
<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">
<スパン>
<img class="img-fluidrounded 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">
<li class="アクティブ">
<a class="nav-link" href="index.htm">ホーム</a>
</li>
<li class="nav-item">
<div class="ドロップダウン">
<a class="dropbtn nav-link">マーケット</a>
<div class="ドロップダウンコンテンツ">
<a href="">外国為替</a>
<a href="">暗号通貨</a>
<a href="">インデックス</a>
<a href="">株式</a>
<a href="">商品</a>
</div>
</div>
<div class="モバイルビューマーケットナビ">
<a href="">外国為替</a>
<a href="">暗号通貨</a>
<a href="">インデックス</a>
<a href="">株式</a>
<a href="">商品</a>
</div>
</li>
<li class="nav-item">
<div class="ドロップダウン">
<a class="dropbtn nav-link">取引</a>
<div class="ドロップダウンコンテンツ">
<a href="">取引プラットフォーム</a>
<a href="">ツール</a>
<a href="">教育</a>
<a href="">特典</a>
</div>
</div>
<div class="モバイルビューマーケットナビ">
<a class="sub-nav-link" href="">取引プラットフォーム</a>
<a class="sub-nav-link" href="">ツール</a>
<a class="sub-nav-link" href="">教育</a>
<a class="sub-nav-link" href="">特典</a>
</div>
</li>
- ;
<a class="nav-link" href="">アカウントの種類</a>
</li>
- ;
<a class="nav-link" href="">概要</a>
</li>
- ;
<a class="nav-link" href="">連絡先</a>
</li>
<li class="d-md-block d-lg-none d-block ">
<a class="nav-link" href="">ログイン</a>
<a class="btn-border-inversecol-12 btn-sm me-3" href="">登録</a>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</ナビ>
<div class="header-right d-flex d-none d-md-none d-lg-block">
<a href="" class="btn-border btn-sm me-3">ログイン</a>
<a href="" class="btn-border-inverse btn-sm me-3">登録</a>
</div>
</div>
</ヘッダー>
<!-- ナビゲーション終了 --></pre>
</p>
<p> <strong> 空白: </strong> 私たちは、この問題を解決する方法を発見しました。主要な「ナビリンク」の後に接続されている場合、それらはポイントされなくなります。 div は、JS および CSS を使用して、ナビゲーション リンクの下に表示される「ドロップダウン コンテンツ」を表示します。
