Bootstrap Dropdown이 IE7의 다른 요소 뒤에 나타나는 이유는 무엇입니까?

IE7에서 다른 요소 뒤에 나타나는 Bootstrap 드롭다운

Bootstrap 2.3.1에서는 '드롭다운 메뉴'를 사용하여 드롭다운 메뉴를 생성할 수 있습니다. 수업. 그러나 사용자는 z-index CSS 속성을 설정했음에도 불구하고 IE7에서 이러한 메뉴가 다른 요소 뒤에 나타나는 문제에 직면했습니다.

문제 이해: 스택 컨텍스트

이 문제를 해결하려면 스택 컨텍스트의 개념을 이해해야 합니다. 스택 컨텍스트는 요소가 HTML 코드에 나타나는 순서대로 스택되는 3차원 공간입니다. 드롭다운 메뉴는 마우스를 올려야 하는 오버레이와 다른 스택 컨텍스트에 있기 때문에 다른 요소 뒤에 표시됩니다.

문제 해결: 스택 컨텍스트 설정

드롭다운 메뉴에 대한 스택 컨텍스트를 설정하려면 상위 요소에 Z 인덱스와 위치를 설정해야 합니다. 이 경우 헤더 상단 div가 적절한 선택입니다. CSS 수정 사항은 다음과 같습니다.

.header-top {
  z-index: 100;
  position: relative;
}

z-index를 다른 요소보다 높은 값으로 설정하고 위치를 할당함으로써 헤더 상단 div는 드롭다운 메뉴에 대한 새로운 스택 컨텍스트를 생성합니다. 이렇게 하면 메뉴가 다른 모든 요소 위에 표시됩니다.

위 내용은 Bootstrap Dropdown이 IE7의 다른 요소 뒤에 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!