<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>