IT이야기

트위터 부트스트랩 드롭다운 메뉴의 z-색인 문제

cyworld 2021. 10. 2. 17:52
반응형

트위터 부트스트랩 드롭다운 메뉴의 z-색인 문제


내 페이지 상단의 고정 탐색 모음에서 트위터 부트스트랩 드롭다운 메뉴를 사용하고 있습니다.

모두 잘 작동하지만 드롭다운 메뉴 항목이 다른 페이지 요소 앞이 아닌 뒤에 표시되는 문제가 있습니다.

페이지에 position: relativejquery ui 아코디언 또는 Google 차트와 같은 항목이 있으면 그 뒤에 드롭다운 메뉴가 표시됩니다. z-indexdd 메뉴와 탐색 모음을 변경하려고 시도 했지만 아무런 차이가 없습니다.

메뉴를 다른 콘텐츠 위에 놓을 수 있는 유일한 방법은 콘텐츠를 position: fixed;OR 로 변경하는 z-index: -1;것입니다. 하지만 이 두 가지 솔루션 모두 다른 문제를 야기합니다.

도움을 주시면 감사하겠습니다.

나는 이것이 아마도 내가 오해한 CSS 위치 지정과 관련된 몇 가지 표준 문제라고 생각하므로 어떤 코드도 게시하지 않았지만 필요한 경우 할 수 있습니다.

감사 해요.


무슨 일이 일어나고 있는지 깨달았습니다.

나는 헤더 안에 navbar를 가지고 있었다 position: fixed.

z-index헤더를 변경했고 지금 작동하고 있습니다. z-index처음에 !#@!?

감사 해요.


부트스트랩 3.0.0이 있는 Windows8의 IE 7.

.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

결정된


여기에서 같은 버그가 발생했습니다. 이것은 나를 위해 일했습니다.

.navbar {
    position: static;
}

위치를 정적으로 설정하면 탐색 모음이 평소와 같이 문서의 흐름에 빠지게 됩니다.


이것은 그것을 고칠 것입니다

.navbar .nav > li {
z-index: 10000;
}

여전히 Bootstrap v3, navbar 및 dropdown의 문제에는 동일한 z-index가 있습니다.


나는 같은 문제가 있었고이 주제를 읽은 후 CSS에 이것을 추가하여 해결했습니다.

.navbar-fixed-top {
    z-index: 10000;
}

제 경우에는 고정된 상단 메뉴를 사용하고 있기 때문입니다.


탐색 모음에서 제거하여 해결 -webkit-transform:

-webkit-transform: translate3d(0, 0, 0);

https://stackoverflow.com/a/12653766/391925 에서 약탈


이것은 나를 위해 고쳤습니다.

.navbar-wrapper {
  z-index: 11;
}

이것은 나를 위해 일했습니다.

.dropdown, .dropdown-menu {
  z-index:2;
}
.navbar {
  position: static;
  z-index: 1;
}

transform: translateY(50%);속성 을 제거하여 이 문제를 해결 했습니다.

참조URL : https://stackoverflow.com/questions/13916326/z-index-issue-with-twitter-bootstrap-dropdown-menu

반응형