2008-09-17 16 views
13

मैंने आज एक छोटी सी समस्या पर भाग लिया है: मेरे पास एक जेएस ड्रॉप डाउन मेनू है और जब मैंने GoogleMap डाला है ... मेनू को Google मानचित्र के पीछे प्रस्तुत किया गया है ... Google मानचित्र के जेड इंडेक्स को मौका देने के तरीके पर कोई विचार?Google मानचित्र, जेड इंडेक्स और ड्रॉप डाउन जावास्क्रिप्ट मेनू

धन्यवाद!

उत्तर

8

आपकी समस्या इंटरनेट एक्सप्लोरर में होता है, लेकिन यह जिस तरह से आप Firefox या Safari, this link में उम्मीद थी एक similar problem साथ मेरे लिए असाधारण मददगार था बना देता है।

ऐसा लगता है कि तत्व को "स्थिति: रिश्तेदार" के रूप में चिह्नित करने के विचार को उबालते हुए प्रतीत होता है। सीएसएस में आईई 6 & 7 एचटीएमएल दस्तावेज़ में इससे पहले आने वाले अन्य तत्वों के सापेक्ष इसके जेड-इंडेक्स के साथ गड़बड़ कर देता है, अनजान और विरोधी-spec तरीकों से। माना जाता है कि IE8 "सही ढंग से" व्यवहार करता है लेकिन मैंने इसे स्वयं परीक्षण नहीं किया है।

आपकी समस्या <SELECT> फॉर्म तत्व के साथ है, तो एंट्रॉन की सलाह वास्तव में उपयोगी होगी, लेकिन यदि आप ड्रॉप डाउन की तरह कार्य करने के लिए divs या uls में हेरफेर करने के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं तो मुझे नहीं लगता कि यह मदद करने जा रहा है।

+0

को बदलने का एक तरीका मांग रहा था यह आपके द्वारा लिंक किया गया एक बहुत उपयोगी लेख है। धन्यवाद! –

1

अपने मेनू जेड-इंडेक्स को अत्यधिक उच्च सेट करने का प्रयास करें। Apparently Google मानचित्र -00000000 से 9000000 तक की एक श्रृंखला का उपयोग करता है।

+0

मेनू टेम्पलेट में बनाए गए हैं ... मुझे यकीन नहीं है कि मैं इसे नियंत्रित कर सकता हूं। यही कारण है कि मैं Google मानचित्र के जेड-इंडेक्स – ebarrera

1

एक डीआईवी में मानचित्र लपेटें, डीआईवी को 1 का एक जेड इंडेक्स दें। एक डीआईवी में अपनी ड्रॉप-डाउन लपेटें और इसे उच्च मान दें।

2

ध्यान दें कि कुछ ब्राउज़रों में ड्रॉपडाउन मेनू (अहम आईई * अहम) बिल्कुल zPositioned नहीं किया जा सकता है। यदि आप इसे ऊपर रखना चाहते हैं तो आपको इसे अस्पष्ट करने के लिए "iframe shim" का उपयोग करना होगा या पूरी तरह से ड्रॉपडाउन को छुपाएं। देखें: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

2

नक्शा पहले से ही एक div के अंदर लपेटा गया है। इसे एक नकारात्मक जेड-इंडेक्स दें और यह काम करता है - एक चेतावनी के साथ: gmaps नियंत्रण क्लिक करने योग्य नहीं हैं।

2

यदि आपका मेनू एक div कंटेनर में लपेटा गया है उदा। #menuWrap फिर इसे स्थिति के सापेक्ष असाइन करें और इसे एक उच्च जेड-इंडेक्स दें .... उदा।

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

सुनिश्चित करें कि आपके नक्शा एक div

1

आईई समस्या

हर div कि एक रिश्तेदार तैनात div में लपेटा जाता है IE में एक नया z- सूचकांक शुरू कर देंगे देता है अंदर है बनाओ। जिस तरह से आईई बाहरी सापेक्ष divs का अर्थ है, एचटीएमएल के क्रम में है। अंतिम परिभाषित शीर्ष पर है। कोई फर्क नहीं पड़ता कि रिश्तेदार div div के अंदर divs के z-indexes क्या हैं।

आईई के लिए समाधान: अंतिम रूप में एचटीएमएल पर शीर्ष पर होना चाहिए जो परिभाषित करें।

(तो z- सूचकांक IE में काम करता है, लेकिन केवल धारक div प्रति, हर धारक div अन्य धारक divs से स्वतंत्र है)

0

z-index (Internet Explorer 7 में विशेष रूप से) वास्तव में मेरे लिए काम नहीं किया। मैंने उच्च बनाम कम नक्शा जेड इंडेक्स के कई अलग-अलग संयोजनों की कोशिश की लेकिन उन्हें कोई खुशी नहीं मिली।

अब तक मेरे लिए सबसे आसान/तेज जवाब (, सचमुच <div id="map"> से पहले) फिर से व्यवस्थित करने के लिए मेरे मार्क-अप/सीएसएस मार्क-अप में सूचीबद्ध मेरी flyouts/रोलओवर ऊपर मेरी नक्शा/ से पहले करने के लिए था , इस तरह से मैं z-index डिफ़ॉल्ट (auto) छोड़ सकता हूं और अपने वेबैप के अधिक महत्वपूर्ण पहलुओं पर जा सकता हूं;)

आशा है कि इससे मदद मिलती है!

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

मानचित्र और मेनू दोनों के लिए जेड-इंडेक्स सेट करने की आवश्यकता नहीं है। यदि आप मानचित्र से अधिक मेनू के जेड-इंडेक्स को बस सेट करते हैं, तो यह आवश्यक रूप से काम नहीं करेगा।

मानचित्र div के z-index को -1 पर सेट करें। अब मेनू नीचे गिर जाएगा और मानचित्र पर प्रदर्शित होगा ......... लेकिन यदि आप एक रैपर का उपयोग कर रहे हैं तो नक्शा अब इंटरैक्टिव नहीं होगा क्योंकि यह अब रैपर के पीछे है।

इसके आसपास काम करने के लिए, अपने wrapper div में onouseouse और onmouseout फ़ंक्शंस का उपयोग करें। सुनिश्चित करें कि वे आपके रैपर div में हैं और आपके मानचित्र div नहीं हैं।

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

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

मैं एक गूगल शैली ड्रॉप-डाउन बनाया है और एक ही समस्या थी ..., तुम सिर्फ एक नियंत्रण बना सकते हैं और उपयोग करके मानचित्र पर यह जगह गूगल मैप्स के लिए वी 3 एपीआई का उपयोग कर:

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

चूंकि यह एक ड्रॉप-डाउन है, बस सुनिश्चित करें कि युक्त div का जेड-इंडेक्स उच्चतम है (z = 3) तो मेनू आइटम वाले ड्रॉप-डाउन भाग में निम्न होता है जिसमें युक्त div (z = 0) होता है।

यहां एक example है।

मेरे अनुभव से, केवल एक बार आपको शिम्स का उपयोग करने की आवश्यकता है प्लग-इन (जैसे Google धरती के साथ)।

0

मुझे पता चला है कि कभी-कभी अनजाने में अनदेखा करने की उपेक्षा होती है! डक्टटाइप आईई में इस प्रकार का हिचकी का कारण बनता है, जब अन्य ब्राउज़र पेज ठीक से बातचीत करने में सक्षम होते हैं।