Google 지도, Z Index 및 드롭다운 Javascript 메뉴

StackOverflow https://stackoverflow.com/questions/86604

문제

오늘 약간의 문제가 발생했습니다.JS 드롭다운 메뉴가 있고 GoogleMap을 삽입하면...메뉴는 Google 지도 뒤에 렌더링됩니다.Google 지도의 z Index를 찾는 방법에 대한 아이디어가 있으신가요?

감사해요!

도움이 되었습니까?

해결책

Internet Explorer에서 문제가 발생했지만 FireFox 또는 Safari에서 예상한 대로 렌더링되는 경우, 이 링크 나에게 매우 도움이 되었습니다. 비슷한 문제.

요소를 "위치 : 상대"로 표시한다는 생각으로 끓인 것으로 보입니다. CSS에서 IE6 & 7은 HTML 문서에서 직관적이지 않은 방식으로 나오는 다른 요소에 비해 z- 인덱스를 엉망으로 만듭니다.아마도 IE8은 "올바르게" 작동하지만 직접 테스트하지는 않았습니다.

귀하의 문제가 다음과 같은 경우 Anutron의 조언은 정말 도움이 될 것입니다. <SELECT> 양식 요소를 사용하지만 JavaScript를 사용하여 div 또는 ul을 드롭다운처럼 작동하도록 조작하는 경우에는 도움이 되지 않을 것이라고 생각합니다.

다른 팁

일부 브라우저의 드롭다운 메뉴(에헴IE*ahem)은 전혀 zPositioned될 수 없습니다.그 위에 무언가를 배치하려면 "iframe shim"을 사용하여 이를 가리거나 드롭다운을 완전히 숨겨야 합니다.보다: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

지도는 이미 div 안에 포함되어 있습니다.음수 Z-색인을 지정하면 작동합니다. 한 가지 주의사항은 다음과 같습니다.Gmaps 컨트롤은 클릭할 수 없습니다.

메뉴가 div 컨테이너에 싸여 있는 경우 #menuWrap 그런 다음 상대 위치를 할당하고 높은 Z- 색인을 지정하십시오 ....예를 들어

#menuWrap {
  position: relative;
  z-index: 9999999
}

지도가 div 안에 있는지 확인하세요.

메뉴 Z-색인을 엄청나게 높게 설정해 보세요. 보기에 Google 지도에서는 ​​-9000000에서 9000000 사이의 범위를 사용합니다.

지도를 DIV로 감싸고 해당 DIV에 z-index 1을 지정합니다.드롭다운을 DIV로 감싸고 더 높은 값을 부여하세요.

IE가 문제를 제공합니다

상대 위치 div에 포함된 모든 div는 IE에서 새로운 Z-색인을 시작합니다.IE가 외부 상대 div를 해석하는 방식은 html 순서입니다.마지막으로 정의된 항목이 맨 위에 표시됩니다.상대적으로 위치가 지정된 div 내부에 있는 div의 z-인덱스가 무엇이든 상관없습니다.

IE용 솔루션:HTML에서 마지막으로 맨 위에 있어야 하는 div를 정의합니다.

(따라서 Z-색인은 IE에서 작동하지만 홀더 div별로만 작동하며 모든 홀더 div는 다른 홀더 div와 독립적입니다.)

z-index (특히 Internet Explorer 7의 경우) 저에게는 정말 효과가 없었습니다.나는 높은 것과 높은 것의 다양한 조합을 시도했습니다.지도의 Z-인덱스가 낮았지만 기쁨이 없었습니다.

지금까지 나에게 있어서 가장 간단하고 빠른 대답은 플라이아웃/롤오버가 마크업에 나열되도록 마크업/CSS를 다시 정렬하는 것이었습니다. 위/이전 내 지도(문자 그대로, <div id="map">), 이런 식으로 나는 z-index 기본값으로 유지(auto) 그리고 내 웹앱의 더 중요한 측면으로 넘어갑니다 ;)

도움이 되었기를 바랍니다!

<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>

Google 스타일 드롭다운을 만들었고 동일한 문제가 발생했습니다. Google 지도용 V3 API를 사용하면 다음을 사용하여 컨트롤을 만들고 지도에 배치할 수 있습니다. 

map.controls[google.map.ControlPosition.TOP].push(control);

드롭다운이므로 포함하는 div의 z-인덱스가 가장 높고(z=3) 메뉴 항목이 포함된 드롭다운 부분이 포함된 div(z=0)보다 낮은지 확인하세요.

여기에 예.

내 경험에 따르면 shim을 사용해야 하는 유일한 경우는 플러그인(예: Google Earth)용입니다.

지도와 메뉴 모두에 대해 Z-색인을 설정할 필요가 없습니다.단순히 메뉴의 Z-색인을 지도보다 높게 설정하면 반드시 작동하지는 않습니다.

지도 div의 Z-색인을 -1로 설정합니다.이제 메뉴가 드롭다운되어 지도 위에 표시됩니다....하지만 래퍼를 사용하는 경우 지도는 이제 래퍼 뒤에 있기 때문에 더 이상 대화형이 아닙니다.

이 문제를 해결하려면 래퍼 div에서 onmouseover 및 onmouseout 함수를 사용하세요.지도 div가 아닌 래퍼 div에 있는지 확인하세요.

onmouseover="getElementById('map').style.zIndex = '10000';" 

onmouseout="getElementById('map').style.zIndex = '-1';"

때때로 실수로 !doctype 선언을 무시하면 다른 브라우저가 페이지를 잘 협상할 수 있는 것처럼 보일 때 IE에서 이런 종류의 문제가 발생할 수 있다는 것을 발견했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top