IE7에서 다른 요소 뒤에 나타나는 부트스트랩 드롭다운 메뉴

부트스트랩 드롭다운 메뉴가 웹사이트의 다른 요소 뒤에 나타나는 문제가 있습니다. IE7에서는. 이 문제를 해결하려면 CSS의 스택 컨텍스트 개념을 이해해야 합니다.

스태킹 컨텍스트에서 요소는 z-index 속성에 따라 서로 상대적으로 배치됩니다. 그러나 현재 스택 컨텍스트 외부의 요소는 상호 작용하지 않습니다. 귀하의 경우 드롭다운 메뉴는 동일한 스택 컨텍스트에 있지 않기 때문에 다른 요소 위에 나타나지 않습니다.

이 문제를 해결하려면 드롭다운 메뉴의 상위 요소에 z-index 속성을 추가할 수 있습니다. 그러면 새로운 스택 컨텍스트가 생성되고 드롭다운 메뉴가 다른 요소 위에 나타날 수 있습니다. HTML 코드에서 .header-top div는 이에 적합한 상위 요소입니다.

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

이렇게 하면 드롭다운 메뉴에 스택 컨텍스트가 있어 페이지의 다른 요소 위에 표시될 수 있습니다.