Tôi đã gặp một chút vấn đề hôm nay: Tôi có một trình đơn thả xuống JS và khi tôi chèn một GoogleMap ... Menu được hiển thị phía sau Bản đồ Google ... Bất kỳ ý tưởng nào về cách tạo cơ hội cho Chỉ mục z của Bản đồ Google?Google Maps, Z Chỉ mục và thả xuống Các menu Javascript
Cảm ơn!
Nếu sự cố của bạn xảy ra trong Internet Explorer, nhưng nó hiển thị theo cách bạn mong đợi trong FireFox hoặc Safari, this link vô cùng hữu ích đối với tôi với similar problem.
Có vẻ như đun sôi xuống ý tưởng đánh dấu phần tử là "vị trí: tương đối;" trong CSS khiến IE6 & 7 gây rối với chỉ số z-index của nó so với các phần tử khác đến trước nó trong tài liệu HTML, theo cách không trực quan và chống spec. Giả sử IE8 hoạt động "chính xác" nhưng tôi chưa thử nghiệm nó.
Lời khuyên của Anutron sẽ thực sự hữu ích nếu vấn đề của bạn là với yếu tố biểu mẫu <SELECT>, nhưng nếu bạn đang sử dụng JavaScript để thao tác div hoặc uls hoạt động như trình đơn thả xuống thì tôi không nghĩ nó sẽ giúp ích.
Thử đặt chỉ mục z-index của bạn cực cao. Apparently Google Maps sử dụng phạm vi từ -9000000 đến 9000000.
Các menu được tạo trong một mẫu ... Tôi không chắc mình có thể kiểm soát điều đó. Đó là lý do tại sao tôi đã yêu cầu một cách để thay đổi z-Index của Google Map – ebarrera
Đưa bản đồ vào DIV, cho DIV chỉ mục z 1. Đặt trình đơn thả xuống của bạn trong DIV và đặt giá trị cao hơn.
Lưu ý rằng trình đơn thả xuống trong một số trình duyệt (ahem IE * ahem) không thể được zPositioned cả. Bạn sẽ cần phải sử dụng "iframe shim" để che khuất hoặc ẩn hoàn toàn menu thả xuống nếu bạn muốn định vị thứ gì đó phía trên nó. Xem: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim
Bản đồ đã được bao bọc bên trong một div. Cung cấp cho nó một chỉ số z âm và nó hoạt động - với một báo trước: các điều khiển gmaps không thể nhấp được.
Nếu menu của bạn được bao gói trong vùng chứa div, ví dụ: #menuWrap sau đó chỉ định vị trí tương đối và cung cấp cho nó chỉ số z cao .... ví dụ:
#menuWrap {
position: relative;
z-index: 9999999
}
Hãy chắc chắn rằng bản đồ của bạn là bên trong một div
IE cung cấp cho các vấn đề
mỗi div được bọc trong một tương đối vị trí div sẽ bắt đầu một z-index mới trong IE. Cách IE diễn giải các div tương đối bên ngoài, theo thứ tự html. Được xác định lần cuối ở trên cùng. Không có vấn đề gì z-indexes của các div bên trong div vị trí tương đối là.
Giải pháp cho IE: xác định div phải nằm trên cùng ở cuối html.
(Vì vậy, z-index làm việc trong IE, nhưng chỉ có mỗi chủ div, mỗi người giữ div không phụ thuộc vào các div giữ khác)
z-index (đặc biệt là trong Internet Explorer 7) thực sự đã không làm việc cho tôi. Tôi đã thử nhiều kết hợp khác nhau của các chỉ số z bản đồ cao so với bản đồ thấp nhưng không có niềm vui.
Bởi đến nay/câu trả lời nhanh nhất đơn giản nhất đối với tôi là để sắp xếp lại mark-up của tôi/css để có flyouts tôi/hiệu ứng Rollover liệt kê trong mark-up trên/trước bản đồ của tôi (nghĩa là, trước khi <div id="map">) , theo cách này tôi có thể để cho z-index vẫn mặc định (auto) và chuyển sang các khía cạnh quan trọng khác của ứng dụng web của tôi;)
Hy vọng điều này sẽ hữu ích!
<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>
Không cần đặt chỉ mục z cho cả bản đồ và menu. Nếu bạn chỉ cần thiết lập chỉ mục z của menu cao hơn bản đồ, nó sẽ không nhất thiết phải hoạt động.
Đặt chỉ mục z của div bản đồ thành -1. Bây giờ trình đơn sẽ thả xuống và hiển thị trên bản đồ ......... nhưng nếu bạn đang sử dụng trình bao bọc thì bản đồ sẽ không còn tương tác vì nó bây giờ nằm sau trình bao bọc.
Để giải quyết vấn đề này, hãy sử dụng các chức năng onmouseover và onmouseout trong div trình bao bọc của bạn. Hãy chắc chắn rằng những người trong div wrapper của bạn và không div bản đồ của bạn.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"
Tôi tạo ra một phong cách google thả xuống và có cùng một vấn đề ... bằng cách sử dụng api V3 cho các bản đồ google, bạn chỉ cần tạo một điều khiển và đặt nó trên bản đồ sử dụng:
map.controls[google.map.ControlPosition.TOP].push(control);
Vì đây là danh sách thả xuống, chỉ cần đảm bảo chỉ mục z của div chứa cao nhất (z = 3) thì phần thả xuống chứa các mục menu thấp hơn giá trị div chứa (z = 0).
Đây là số example.
Từ kinh nghiệm của tôi, thời gian duy nhất bạn cần sử dụng miếng chêm là dành cho các trình cắm (như với Google Earth).
Tôi đã thấy rằng đôi khi vô tình bỏ qua việc tuyên bố! DOCTYPE sẽ gây ra loại trục trặc này trong IE, khi các trình duyệt khác dường như có thể thương lượng trang phạt.
Đó là một bài viết rất hữu ích mà bạn đã liên kết. Cảm ơn! –