드롭 다운 항목의 텍스트가 겹치는 텍스트

Question

안녕하세요, 페이지에 텍스트가 포함되어 있고 텍스트에 일부 항목이 포함 된 UL 목록이있는 경우 해당 항목이 드롭 다운의 항목과 겹쳐서 드롭 다운 메뉴 아래로 슬라이드됩니다.

Div 드롭 다운 내 주변에 다음을 추가하여 수정했다고 생각했습니다.

position:relative; z-index:999999; 

나에게

#source-programs-dd { overflow: auto; background: #fff; max-height: 198px; position:relative; z-index:999999;} 

주기 그리고 그것은 어떤 아이디어 IE7을 제외한 모든 곳에서 작동?

Answer 1

질문을 직접 해결하려면 HTML과 CSS를 확인해야합니다. 그러나 일반적으로 IE7에는 z- 인덱스에 대한 알려진 문제점과 어린이 요소에 대한 z- 인덱스를 계산하는 방법이 있습니다.

이 문제와 관련하여 여러 가지 Stackoverflow 질문이 있습니다.

IE7 Z-Index issue - Context Menu

expanding the menu appearing underneath the gallery in IE7

일반적인 아이디어는 IE7에서, Z- 인덱스가 형제 자매의 부모 요소에서 계산된다는 것이다 : 여기에 도움이 될 그 일부입니다. 즉, 그래서 여기에 조금 이상한 소리를 예를 들어 없습니다 : 상관없이 .parent2 해당 콘텐츠 앞에 나타납니다 무엇 Z-.parent1이 .parent2 겹치는 UL 메뉴 같은 것을 가지고 있다면

이

<div id="parent1">...</div> 
<div id="parent2">...</div> 

, 그것이 가능 수 index .parent1의 자식 요소는 모두입니다.

IE7은 .parent1과 .parent2의 Z- 인덱스를 비교하고 어떤 의미로 모든 자식 요소가 그 값을 상속하기 때문입니다. (자식 요소는 실제로 서로 관련된 Z- 색인 컨텍스트를 갖지만 다른 부모 요소의 자식은 다른 부모의 자식과 관련하여 부모가 먼저 영향을받습니다)

해결 방법은 다음 두 요소를 찾는 것입니다. 문제를 일으키고 서로의 형제 인 부모 요소를 공유하는 위치를 찾습니다.

그런 다음 해당 요소에 적절한 z- 색인을 적용하십시오.

.parent1{ z-index:10; } 
.parent2{ z-index:1; } 

귀하의 HTML을 게시하면 정확한 문제를 찾을 수 있도록 노력하겠습니다.

건배!