Internet Explorer 7에서 내 부트스트랩 드롭다운이 다른 요소 뒤에 나타나는 이유는 무엇입니까?

다른 요소 뒤에 나타나는 부트스트랩 드롭다운 [중복]

문제:

Bootstrap 2.3 .1, "드롭다운 메뉴" 클래스를 사용하여 생성된 드롭다운 메뉴는 특히 높은 Z-색인을 할당했음에도 불구하고 Internet Explorer 7에서 텍스트 및 기타 요소 뒤에 나타납니다.

진단:

이 문제는 스택 컨텍스트 문제로 인해 발생합니다. 드롭다운에 Z-인덱스가 있더라도 동일한 스택 컨텍스트 내의 요소에만 적용됩니다. 이 경우 드롭다운의 상위 요소에는 새로운 스택 컨텍스트를 설정하기 위한 명시적인 Z-인덱스 및 위치가 필요합니다.

해결책:

다음과 같이 CSS를 수정합니다. :

<code class="CSS">.header-top {
  z-index: 10000;
  position: relative;
}

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
  z-index: 1;
}</code>

".header-top"에 "z-index: 10000" 및 "position:relative"를 설정하면 새로운 스태킹 컨텍스트가 생성됩니다. 그런 다음 이 컨텍스트 내의 드롭다운 메뉴에 "z-index: 1"이 할당되어 해당 메뉴가 해당 컨텍스트의 다른 콘텐츠 앞에 배치되도록 합니다. 이렇게 하면 원하는 계층이 설정되고 Internet Explorer 7의 문제가 해결됩니다.

위 내용은 Internet Explorer 7에서 내 부트스트랩 드롭다운이 다른 요소 뒤에 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!