IE7에서 내 드롭다운 메뉴가 내 입력 필드 뒤에 숨겨져 있는 이유는 무엇입니까?

IE7: Z-Index 계층화 혼란 이해

IE7은 요소 계층화에 대한 Z-색인 적용에 있어 복잡성을 나타냅니다. z-index의 작동 방식을 이해하면 계층화 문제를 효과적으로 해결하는 데 도움이 될 수 있습니다.

Z-Index 및 Stacking Context

이름과 달리 z-index는 절대적인 척도가 아닙니다. . 더 높은 Z-인덱스를 가진 요소는 다른 스택 컨텍스트에 속하는 경우 낮은 Z-인덱스를 가진 요소 뒤에 숨겨질 수 있습니다.

스태킹 컨텍스트는 위치가 지정된 요소(절대, 상대 또는 고정)에 대해 생성됩니다. 그러나 IE7은 z-index가 없는 위치 지정 요소를 새로운 스택 컨텍스트를 생성하는 것으로 잘못 해석합니다.

코드의 문제

귀하의 예에서는 위치 지정 범위( <span>) Z-색인이 없습니다. IE7은 이를 새로운 스택 컨텍스트를 생성하여 드롭다운 메뉴(

)를 입력 필드() 뒤에 숨기는 것으로 해석합니다.

가능한 해결 방법

문제를 해결하려면 다음 사항을 고려하세요. 솔루션:

1. 위치 지정 범위에 Z-인덱스 추가:

#envelope-1 {
  position: relative;
  z-index: 1;
}

이것은 스택 컨텍스트를 명시적으로 정의하고 드롭다운이 입력 필드입니다.

2. 에서 위치를 제거하세요. Span:

<span>

위치를 제거하면 불필요한 스태킹 컨텍스트가 제거됩니다. 이제 요소는 드롭다운이 입력 필드 위에 위치하는 기본 계층 순서를 따릅니다.

추가 고려 사항

• Z-색인은 내부 요소에만 영향을 미칩니다. 동일한 스태킹 컨텍스트입니다.
• IE6에는 선택 상자와 iframe이 항상 모든 항목 위에 떠 있는 추가 버그가 있습니다. else.
• 자세한 설명과 유사한 버그 예는 다음을 참조하세요: https://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z- index-bug/

위 내용은 IE7에서 내 드롭다운 메뉴가 내 입력 필드 뒤에 숨겨져 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!