IE7 Z- इंडेक्स लेयरिंग मुद्दे

163

मैंने IE7 के z-indexबग के एक छोटे से परीक्षण मामले को अलग कर दिया है , लेकिन इसे ठीक करने का तरीका नहीं जानता। मैं z-indexदिन भर साथ खेलता रहा ।

z-indexIE7 में क्या गलत है ?

परीक्षण सीएसएस:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

HTML परीक्षण करें:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

css internet-explorer-7 z-index

— rezna
स्रोत

आप एक काम के आसपास के लिए देख रहे हैं और यदि आप करते हैं नहीं पुनर्व्यवस्थित करें सभी अपने html अच्छी तरह से कुछ ढेर संदर्भ में होने चाहिए इस प्रयास करें: brenelz.com/blog/squish-the-internet-explorer-z-index-bug

— Nasaralla

268

जेड-इंडेक्स एक पूर्ण माप नहीं है। Z-index वाले तत्व के लिए यह संभव है: 1000 z- सूचकांक वाले तत्व के पीछे हो: 1 - जब तक संबंधित तत्व अलग-अलग स्टैकिंग संदर्भों से संबंधित होते हैं ।

जब आप z- इंडेक्स निर्दिष्ट करते हैं, तो आप इसे उसी स्टैकिंग संदर्भ के अन्य तत्वों के सापेक्ष निर्दिष्ट कर रहे हैं, और यद्यपि Z- इंडेक्स पर सीएसएस कल्पना का पैराग्राफ कहता है कि एक नया स्टैकिंग संदर्भ केवल जेड-इंडेक्स के अलावा अन्य सामग्री के साथ बनाया गया है ऑटो (जिसका अर्थ है कि आपका संपूर्ण दस्तावेज़ एक एकल स्टैकिंग संदर्भ होना चाहिए), आपने एक पोस्ट स्पैन का निर्माण किया : दुर्भाग्य से IE7 ने नए स्टैकिंग संदर्भ के रूप में z- इंडेक्स के बिना पोस्ट की गई सामग्री की व्याख्या की।

संक्षेप में, इस सीएसएस को जोड़ने का प्रयास करें:

#envelope-1 {position:relative; z-index:1;}

या दस्तावेज़ को फिर से डिज़ाइन करें जैसे कि आपके स्पैन में स्थिति नहीं है: किसी भी सापेक्ष:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

इस बग के समान उदाहरण के लिए http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ देखें । मूल तत्व (आपके उदाहरण में लिफाफा -1) देने का कारण यह है कि एक उच्च z- सूचकांक काम करता है, क्योंकि तब लिफाफे -1 (मेनू सहित) के सभी बच्चे लिफाफे -1 (विशेष रूप से, लिफाफे -2) के सभी भाई-बहनों को ओवरलैप करेंगे।

हालांकि z- इंडेक्स आपको स्पष्ट रूप से परिभाषित करता है कि कैसे चीजें ओवरलैप होती हैं, यहां तक कि जेड-इंडेक्स के बिना लेयरिंग ऑर्डर को अच्छी तरह से परिभाषित किया गया है । अंत में, IE6 में एक अतिरिक्त बग है जो चयन बॉक्स और आइफ्रेम्स को सब कुछ के ऊपर तैरने का कारण बनता है।

— ईमोन नेरबोन
स्रोत

4

अंत में इसे हल कर दिया :) - सापेक्ष स्थिति वास्तव में आकर्षक है, इसलिए मैंने किसी तरह 'लिफाफा' तत्वों के बिना आपके विचार को अपनाया - यह समस्या को हल करने के लिए लगता है और काम करने के लिए भी - बस सुझाव बॉक्स के लिए थोड़ा कोड को फिर से डिज़ाइन करना होगा - thx a बहुत

— rezna

6

तीन अलग-अलग चीजें हैं जो प्रभावित करती हैं कि कैसे तत्व एक-दूसरे को ओवरलैप करते हैं: स्टैकिंग संदर्भ, स्रोत क्रम और पेंटिंग ऑर्डर। स्टैकिंग संदर्भों के साथ काम करते समय सबसे स्पष्ट मुद्दे सामने आते हैं - अन्य दो को जानने से आपको अधिक गूढ़ गोट निकालने में मदद मिलेगी। स्रोत: सीएसएस-चर्चा विकी

— आरजेबी

2

मूल तत्व में z- इंडेक्स जोड़ना एक अद्भुत समाधान है

— डैन्युन लियू

2

मैं तुमसे प्यार करता हूँ। जोड़ा गया स्थिति: रिश्तेदार और जेड-इंडेक्स: 500 मेरे माता-पिता के लिए और इसने इसे ठीक कर दिया!

— आयमेरिक गौराट-एपेलि

2

मैंने टिप्पणियों के साथ इस समस्या का एक हल बनाया जो समाधान प्रदर्शित करता है। jsfiddle.net/fNcGu/3

— क्रिस्टोफर जॉनसन

15

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

— nixis
स्रोत

ऊपर दिए गए "सही" समाधान को पढ़ने के बाद, मैंने सवाल में तुच्छ एक से अधिक जटिल समस्या के लिए एक समाधान तैयार करने की कोशिश की। तो मैं इस जवाब में फेंक दिया और यह एक आकर्षण की तरह काम किया। यदि उपरोक्त समाधान सही है, तो यह निश्चित रूप से आसान है। धन्यवाद!

— लैंडन

11

IE में तैनात तत्व एक नया स्टैकिंग संदर्भ उत्पन्न करते हैं, जिसका z- इंडेक्स मान 0 से शुरू होता है। इसलिए z- इंडेक्स सही तरीके से काम नहीं करता है।

बग को ठीक करने के लिए मूल तत्व को उच्च z-index value (बच्चे के z-index value से भी अधिक हो सकता है) देने का प्रयास करें।

— ed1nh0
स्रोत

1

धन्यवाद। यह समाधान मेरे लिए मूल कंटेनर का एक z- सूचकांक देकर काम करता है, जरूरी नहीं कि बच्चे के z- सूचकांक से अधिक हो।

— नीलमेग

4

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

position:relative; z-index:-1मेरे मुख्य बॉडी कंटेंट पर रखकर मेरे हेडर ड्रॉप डाउन कंटेंट को अचानक आई 7 में बॉडी कंटेंट के ऊपर प्रदर्शित किया जाता है (यह पहले से ही अन्य सभी ब्राउज़रों में और बिना आई 8+ में इश्यू के प्रदर्शित हो रहा था)

तब समस्या यह थी कि यह सभी होवर को अक्षम कर देता है और तत्व में सभी सामग्री पर क्लिक करता है, z-index:-1इसलिए मैं पूरे पृष्ठ के मूल तत्व पर गया और इसे दियाposition:relative; z-index:1

जिसने समस्या को ठीक किया और सही लेयरिंग कार्यक्षमता को बनाए रखा।

थोड़ा हैकी लगता है, लेकिन आवश्यकतानुसार काम किया।

— lukeroxout
स्रोत

3

मैंने पाया कि मुझे div पर एक विशेष जेड-इंडेक्स पदनाम भरने की आवश्यकता थी, जो कि 7 विशिष्ट स्टाइलशीट में है:

div {z-index: 10; }

स्लाइडर के ऊपर दिखाने के लिए असंबंधित div के z- इंडेक्स के लिए, जैसे कि एक नौसेना। मैं बस स्लाइडर div में एक z- इंडेक्स नहीं जोड़ सका।

— इजार समाधान
स्रोत

मैंने पाया कि इसके अलावा html {z-index:1; position:relative;}मेनू को IE पर हिंडोला छवि पर जाने की अनुमति दी गई थी।

— बैसलेपर

2

यदि माता-पिता के नोड्स में पहले उल्लिखित उच्च z- अनुक्रमण आपकी आवश्यकताओं के अनुरूप नहीं है, तो आप वैकल्पिक समाधान बना सकते हैं और समस्याग्रस्त ब्राउज़रों को IE सशर्त टिप्पणियों या मॉर्डनिज़्र द्वारा प्रदान की गई (अधिक आदर्शवादी) सुविधा का उपयोग करके लक्षित कर सकते हैं।

मॉडर्निज़्र के लिए त्वरित (और स्पष्ट रूप से काम करने वाला) परीक्षण:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

— उपगोल
स्रोत

बहुत अच्छा! फ़ीचर डिटेक्शन निश्चित रूप से जाने का रास्ता है।

— जेसन

1

यह एक यानी बग नहीं दिखता है, बस सीएसएस मानक के लिए अलग समझ के लिए। यदि बाहर के कंटेनर को जेड-इंडेक्स निर्दिष्ट नहीं किया जाता है, लेकिन आंतरिक तत्व ने एक उच्च जेड-इंडेक्स निर्दिष्ट किया है। इसलिए कंटेनर का सहोदर शायद उच्च जेड-इंडेक्स तत्व को ओवरले करता है। यहां तक कि अगर ऐसा है, तो यह केवल IE7 में होता है, लेकिन IE6, IE8 और फ़ायरफ़ॉक्स ठीक है।

— c2j
स्रोत

0

सामान्य रूप से IE6 में, कुछ यूआई-तत्वों को मूल नियंत्रणों के साथ लागू किया जाता है। ये नियंत्रण पूरी तरह से अलग चरण (विंडो) में प्रदान किए जाते हैं और हमेशा z- इंडेक्स की परवाह किए बिना किसी भी अन्य नियंत्रण से ऊपर दिखाई देते हैं। चुनिंदा बक्से एक और ऐसे समस्याग्रस्त नियंत्रण हैं।

इस मुद्दे के चारों ओर काम करने का एकमात्र तरीका ऐसी सामग्री का निर्माण करना है जो IE एक अलग "विंडो" के रूप में प्रस्तुत करता है - यानी आप एक टेक्स्टबॉक्स पर एक चयन बॉक्स रख सकते हैं, या, अधिक उपयोगी रूप से, एक iframe।

संक्षेप में, आपको "ऑन-होवर" जैसी चीज़ों की आवश्यकता होगी जैसे मेनू में आईफ्रेम में आईई को इन उपर्युक्त यूआई नियंत्रणों में रखने के लिए।

यह IE7 में तय किया जाना चाहिए था (देखें http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) लेकिन शायद आप किसी प्रकार की संगतता मोड में चल रहे हैं?

— ईमोन नेरबोन
स्रोत

मैं IE6 z- इंडेक्स बग के बारे में जानता हूं - और यह तय है - लेकिन IE7 में अपेक्षाकृत / बिल्कुल स्थिति तत्वों / इनपुट के साथ एक और मुद्दा है (जो IE8 में तय किया गया है) - मुझे समाधान के कुछ जोड़े (जेड-इंडोल के साथ खेलना) मिला, लेकिन उनमें से किसी ने भी काम नहीं किया - इसीलिए मैं वहाँ पूछ रहा हूँ ... वैसे भी जवाब के लिए thx।

— 12

0

यह बग मानक पृथक स्टैकिंग संदर्भ IE बग की तुलना में कुछ अलग मुद्दा प्रतीत होता है। मेरे पास कई स्टैक्ड इनपुट्स के साथ एक समान मुद्दा था (अनिवार्य रूप से प्रत्येक पंक्ति में एक ऑटोोकम्प्टर के साथ एक तालिका)। एकमात्र समाधान मैंने पाया कि प्रत्येक सेल को एक घटती जेड-इंडेक्स वैल्यू दी गई थी।

— जेरेमी कॉफ़मैन
स्रोत

0

यदि आप ड्रॉपडाउन मेनू बनाना चाहते हैं और z- इंडेक्स के साथ कोई समस्या है, तो आप इसे उसी मान (z-index: 999; उदाहरण के लिए) के z-index बनाकर हल कर सकते हैं .. बस पेरेंट और चाइल्ड डिव में z- इंडेक्स डालें; इससे समस्या का समाधान होगा। मैं उस समस्या को हल करता हूं। अगर मैं अलग-अलग z-index लगाता हूं, तो निश्चित रूप से, यह मेरे बच्चे को मेरे पैरेंट डिव पर दिखाएगा, लेकिन, एक बार जब मैं अपने माउस को मेनू टैब से सब-मेनू div (ड्रॉपडाउन सूची) में ले जाना चाहता हूं, तो यह गायब हो जाता है ... फिर मैं एक ही मूल्य के z- सूचकांक डाल और समस्या को हल ..

— मार्को
स्रोत

0

मैंने IE7 (इसके टूलबार) के लिए डेवलपर टूल का उपयोग करके और उस div के कंटेनर में एक नकारात्मक z-index जोड़कर इसे हल किया जो कि दूसरे div से नीचे होगा।

— लुकास
स्रोत