दिलचस्प पोस्ट
2 डी बिंदु सेट में छेद खोजना? मार्करों के बीच Google मानचित्र API और कस्टम पॉलीलाइन मार्ग कोणीय पाठ का क्षेत्रफल वर्ण काउंटर रैंड () से मैं कैसे विशिष्ट संख्याओं की संख्या प्राप्त कर सकता हूं? एपी तत्व (रीसेट सीएसएस) के लिए डिफ़ॉल्ट पैडिंग और / या मार्जिन क्या है? चेतावनी: session_start () विफल: ऐसा कोई फ़ाइल या निर्देशिका नहीं है आईओएस के साथ मेरा 'क्लिक' फ़ंक्शन कैसे काम करे जहां एसक्यूएल में धाराओं का मामला है पायथन से जीडीबी को इकट्ठा और नियंत्रित करें Mac OSX शेर से PostgreSQL 9.0.4 को पूरी तरह अनइंस्टॉल करें? एक sqlite तालिका की पंक्तियों की अधिकतम संख्या सीमित करें पृष्ठभूमि में एक ffmpeg प्रक्रिया चलाएं Android के साथ एक लंबी प्रेस का पता लगा रहा है WebView एंड्रॉइड प्रॉक्सी एमवीसी: एक अपलोड करने के लिए फाइल अपलोड और अन्य फॉर्म फ़ील्ड कैसे पोस्ट करें

क्या बड़ी प्राथमिकता है: ब्राउज़र में अस्पष्टता या z- इंडेक्स?

मैं जावास्क्रिप्ट में "पॉपअप विंडो" को कोडित कर रहा हूं और मुझे एक दिलचस्प बात मिल गई है:

पका हुआ स्क्रीनशॉट अजीब स्टैकिंग व्यवहार का प्रदर्शन

पॉपअप विंडो के नीचे नौसेना वर्ग दिखाई देता है, हालांकि मुझे उम्मीद है कि यह छिपी होगी। पॉपअप वर्ग के बाद जोड़ा गया था, इसलिए यह शीर्ष पर होना चाहिए।

नौसेना वर्ग की सीएसएस opacity संपत्ति 0.3 । मैंने जो कोशिश की है उससे, ऐसा लगता है कि अंतराल (0,1) से हर संख्या समान परिणाम देगा। अगर मैं इसे 1 बदलता हूं, तो यह अपेक्षित रूप से व्यवहार करता है (अर्थात पॉपअप के तहत वर्ग का हिस्सा छिपा हुआ है)।

मैंने z-index संपत्ति को वर्ग के लिए 10 और पॉपअप के लिए 100 सेट करने की कोशिश की है, लेकिन यह कुछ भी नहीं बदलेगा।

मैं क्या खो रहा हूँ? वर्ग का हिस्सा क्यों प्रदर्शित किया गया है?

ब्राउज़ किए गए ब्राउज़र:

  • Firefox 3.6.x
  • क्रोम 4

Solutions Collecting From Web of "क्या बड़ी प्राथमिकता है: ब्राउज़र में अस्पष्टता या z- इंडेक्स?"

यह एक बग नहीं है और वास्तव में यह काम करने वाला है । स्टैकिंग कोंटेक्सट्स के विस्तृत वर्णन के रूप में यह थोड़ा भ्रमित है इसके बारे में कुछ भी उल्लेख नहीं करता है हालांकि, विज़ुअल फॉर्मेटिंग मॉड्यूल रंग मॉड्यूल से लिंक करता है जहां यह विशेष रूप से प्राप्त किया जा सकता है (जोर खान):

चूंकि 1 से कम अस्पष्टता वाले तत्व को एक ऑफस्क्रीन छवि से मिलाया जाता है, इसके बाहर की सामग्री को इसके अंदर की सामग्री के टुकड़ों के बीच z- क्रम में नहीं ले जाया जा सकता है। इसी कारण से, कार्यान्वयन 1 से कम अस्पष्टता वाले किसी भी तत्व के लिए एक नया स्टैकिंग संदर्भ बनाना चाहिए। यदि 1 से कम अस्पष्टता वाले तत्व को स्थान नहीं दिया गया है, तो कार्यान्वयन को उस परत को पेंट करना चाहिए, जो उसके माता-पिता स्टैकिंग संदर्भ में है, उसी पर स्टैकिंग ऑर्डर का उपयोग किया जाएगा, जो 'z- इंडेक्स: 0' और 'अस्पष्टता: 1' के साथ एक तैनात तत्व थे। यदि 1 से कम अस्पष्टता वाले एक तत्व स्थिति में है, तो 'z-index' संपत्ति को [CSS21] में वर्णित के रूप में लागू होता है, सिवाय इसके कि 'ऑटो' को '0' माना जाता है क्योंकि एक नया स्टैकिंग संदर्भ हमेशा बना रहता है संदर्भों को स्टैकिंग के बारे में अधिक जानकारी के लिए अनुभाग [9 9] की धारा 9.9 और परिशिष्ट ई देखें। इस अनुच्छेद में नियम एसवीजी तत्वों पर लागू नहीं होते, क्योंकि एसवीजी का अपना रेंडरिंग मॉडल ([एसवीजी 11], अध्याय 3) है।

यह z-index से ज़्यादा ज़रूरी है क्योंकि उनके स्टैकिंग संदर्भ (सीएसएस 2 स्पेसिफिकेशन में z- इंडेक्स देखें) के मुकाबले z-index z-index तुलना में ज़्यादा ज़रूरी नहीं है।

दूसरे शब्दों में, z-index केवल एक तैनात पूर्वजों (चाहे उसके रिश्तेदार, पूर्ण या निश्चित) के संदर्भ में महत्वपूर्ण हैं। आपकी समस्या को ठीक करने के लिए आपको क्या करने की आवश्यकता है एक position: relative; जोड़ें position: relative; तत्व में जो आपके पॉपअप और आपके नौसेना वर्ग दोनों को शामिल करता है, और संभवतः इसे z-index: 1; । अपने स्क्रीनशॉट को देखकर यह संभवतः एक शीर्ष तत्व होगा जैसे कि रैपर डिवेल।

दो तत्वों के लिए समाधान, जैसे डिविज़: अपने शीर्ष तत्व को 0.99 अस्पष्टता जोड़ें, और दोनों का क्रम पुनः स्थापित किया गया है।

 opacity: 0.99; 

इस समस्या को डिबग करने के लिए उदाहरण कोड की आवश्यकता हो सकती है

आप overflow: hidden डाल सकते हैं overflow: hidden और संभवत position: relative एक DIV में position: relative , जो कि सभी संपादक ऑब्जेक्ट्स को चारों ओर से घेरे हुए हैं, तत्वों को केवल उस DIV लिए मजबूर करने के लिए, जैसे:

 <div style="overflow: hidden; position: relative"> (Editor object buttons go here) </div> 

अंतिम उपाय के रूप में, आप दोनों तत्वों के बीच में एक iframe प्रयास भी कर सकते हैं ताकि वे उन्हें रोक सकें।

आप पॉपअप विंडो की DIV को इस तरह से सेट करने का प्रयास कर सकते हैं !important है कि स्टाइल नई शैली या क्लास लागू करने पर नहीं बदलती है:

 background-color: white !important; z-index: 100 !important; opacity: 1.0 !important; 

फिर, नया सीएसएस वर्ग बनाओ:

 .PopupElement { z-index: inherited; opacity: inherited; } 

और विंडो में सभी तत्वों को कक्षा जोड़ें, उदाहरण के लिए इस तरह से:

 <input value="posx" class="some_class PopupElement"/> 

मेरा अनुमान है कि यह काम करेगा, क्योंकि सीएसएस गुणों को लागू करने में कोई प्राथमिकता नहीं है … जहां तक ​​मुझे पता है। =)

मेरी भी यही समस्या थी। रंग / अस्पष्टता के बजाय आरजीबी का उपयोग करके मेरी समस्या हल हो गई है कम (बिटस्ट्रैप ढांचे में) के साथ कार्य करना, फ़ेड () फ़ंक्शन ने मेरे लिए रूपांतरण किया था