Z-색인을 사용하여 드롭다운 콘텐츠를 맨 위에 배치하는 방법은 무엇입니까?
<p>모바일 보기에서 이와 같이 작동해야 하지만 검사 요소에서는 모바일 보기로 표시되는 드롭다운 div 요소입니다. </p>
<p>이 요소를 "z-index:121212 !important;"로 유지하기 위해 거의 모든 관련 탐색 요소의 CSS z-index 스타일을 변경하려고 시도했지만 드롭다운 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.5s;
}
.dropdown-content a {
색상: #fff;
패딩: 12px 16px;
텍스트 장식: 없음;
디스플레이: 블록;
}
.dropdown-content a:hover{
배경색: var(--main-color);
색상: #000 !중요;
}
.dropdown-content a:hover{
색상: #1F586B;
}
.dropdown:hover .dropdown-content{
디스플레이: 인라인 블록;
}
.nav-pills.has-two .nav-item .nav-link.active {
배경색: var(--main-color);
색상: #000;
}
.nav-링크{
글꼴 두께: 600 !중요;
문자 간격: 0.8px;
}
@미디어 화면 및 (최소 너비: 1024px) {
.지원-링크{
여백 오른쪽: 10px!중요;
}
.nav-링크{
왼쪽 패딩: 25px!important;
}
}
.nav-pills.has-two .nav-item .nav-link {
배경색: #000 !중요;
색상: #fff;
테두리 반경: 0;
-웹킷-국경-반경: 0;
-moz-경계-반경: 0;
-ms-경계 반경: 0;
-o-경계 반경: 0;
패딩: 12px 20px;
}</pre>
<pre class="brush:html;toolbar:false;"><!-- 탐색 -->
<header id="header" class="fixed-top ">
<div class="컨테이너 d-flex align-items-center justify-content-lg-between">
<div class="logo me-auto me-lg-0">
<a href="index.htm">
<스팬>
<img class="img-fluid 반올림 sm-device-img text-align" src="asset/theme1/images/logo/logo.svg" width="100%" alt="pp">
</스팬>
</a>
</div>
<nav id="navbar" class="navbar 주문-마지막 주문-lg-0">
<li class="활성">
<a class="nav-link" href="index.htm">홈</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">시장</a>
<div class="dropdown-content">
<a href="">외환거래</a>
<a href="">암호화폐</a>
<a href="">지수</a>
<a href="">주식</a>
<a href="">상품</a>
</div>
</div>
<div class="mobile-view marketNav">
<a href="">외환거래</a>
<a href="">암호화폐</a>
<a href="">지수</a>
<a href="">주식</a>
<a href="">상품</a>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">거래</a>
<div class="dropdown-content">
<a href="">거래 플랫폼</a>
<a href="">도구</a>
<a href="">교육</a>
<a href="">혜택</a>
</div>
</div>
<div class="mobile-view marketNav">
<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-inverse col-12 btn-sm me-3" href="">등록</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">로그인</a>
<a href="" class="btn-border-inverse btn-sm me-3">등록</a>
</div>
</div>
</헤더>
<!-- 탐색 종료 --></pre>
</p>
<p><strong>编辑：</strong>저는 이 방법을 사용합니다. 나는 높은 고도의 공간을 갖고 있습니다. div는 아래의 nav-link에서 다운로드할 수 있으며, JS와 CSS를 사용하여 JS와 CSS를 사용할 수 있습니다. 여기에서는 "dropdown-content"가 중앙에 있습니다.</p>
