z- इंडेक्स निश्चित स्थिति के साथ काम नहीं कर रहा है

422

मैं एक divडिफ़ॉल्ट स्थिति (यानी position:static) और divएक fixedस्थिति के साथ है ।

अगर मैं तत्वों के z-index को सेट करता हूं, तो स्थिर तत्व के पीछे तय तत्व को बनाना असंभव लगता है।

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
स्निपेट का विस्तार करें

या यहाँ jsfiddle पर: http://jsfiddle.net/mhFxf/

मैं position:absolute स्थैतिक तत्व का उपयोग करके इसके आसपास काम कर सकता हूं , लेकिन क्या कोई मुझे बता सकता है कि ऐसा क्यों हो रहा है?

(यह एक समान प्रश्न लगता है, ( फिक्स्ड पोजिशनिंग ब्रेकिंग जेड-इंडेक्स ), लेकिन इसका कोई संतोषजनक उत्तर नहीं है, इसलिए मैं यहां अपने उदाहरण कोड के साथ यह पूछ रहा हूं)

css  z-index 
— DanSingerman
स्रोत

जवाबों:

146

इस सवाल को कई तरीकों से हल किया जा सकता है, लेकिन वास्तव में, स्टैकिंग नियमों को जानने से आपको सबसे अच्छा उत्तर मिल सकता है जो आपके लिए काम करता है।

समाधान

<html>तत्व अपने ही स्टैकिंग संदर्भ है, तो सिर्फ एक स्टैकिंग संदर्भ अंदर स्टैकिंग नियमों का पालन करें और आप देखेंगे कि तत्वों को इस क्रम में खड़ी दिखती हैं देखेंगे

  1. स्टैकिंग संदर्भ का मूल तत्व ( <html>इस मामले में तत्व)
  2. नकारात्मक जेड-इंडेक्स मान के साथ स्थिति वाले तत्व (और उनके बच्चे) (उच्च मान निचले मानों के सामने स्टैक्ड होते हैं; एचटीएमएल में उपस्थिति के अनुसार समान मूल्य वाले तत्व स्टैक किए जाते हैं)
  3. गैर-तैनात तत्व (HTML में उपस्थिति के आधार पर)
  4. ऑटो के एक जेड-इंडेक्स मान के साथ स्थिति वाले तत्व (और उनके बच्चे) (HTML में उपस्थिति के आधार पर)
  5. पॉजिटिव तत्वों (और उनके बच्चों) को पॉजिटिव z- इंडेक्स वैल्यू के साथ (उच्च मूल्यों को निचले मूल्यों के सामने स्टैक्ड किया जाता है; एचटीएमएल में उपस्थिति के अनुसार समान वैल्यू वाले तत्वों को स्टैक किया जाता है)

तो तुम कर सकते हो

  1. -1 का z- इंडेक्स सेट करें, क्योंकि #under-ve z- इंडेक्स गैर-तैनात #overतत्व के पीछे दिखाई देता है
  2. की स्थिति सेट #overकरने के लिए relativeइतना है कि नियम 5 यह लागू होता है

असली समस्या

तत्वों के स्टैकिंग क्रम को बदलने की कोशिश करने से पहले डेवलपर्स को निम्नलिखित जानना चाहिए।

  1. जब एक स्टैकिंग संदर्भ बनता है
    • डिफ़ॉल्ट रूप से, <html>तत्व मूल तत्व है और पहला स्टैकिंग प्रसंग है
  2. स्टैकिंग संदर्भ के भीतर स्टैकिंग ऑर्डर

नीचे दिए गए स्टैकिंग ऑर्डर और स्टैकिंग संदर्भ नियम इस लिंक से हैं

जब एक स्टैकिंग संदर्भ बनता है

  • जब कोई तत्व किसी दस्तावेज़ का मूल तत्व होता है ( <html>तत्व)
  • जब किसी तत्व का स्थैतिक मूल्य और ऑटो के अलावा z- इंडेक्स मूल्य के अलावा कोई अन्य मूल्य होता है
  • जब एक तत्व में 1 से कम एक अस्पष्टता मूल्य होता है
  • कई नए CSS गुण स्टैकिंग संदर्भ भी बनाते हैं। इनमें शामिल हैं: ट्रांसफ़ॉर्म, फ़िल्टर, सीएसएस-क्षेत्र, पृष्ठांकित मीडिया और संभवतः अन्य। https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • एक सामान्य नियम के रूप में, ऐसा लगता है कि अगर सीएसएस संपत्ति को ऑफ़स्क्रीन संदर्भ में प्रतिपादन की आवश्यकता होती है, तो उसे एक नया स्टैकिंग संदर्भ बनाना होगा।

स्टैकिंग ऑर्डर एक स्टैकिंग प्रसंग के भीतर

तत्वों का क्रम:

  1. स्टैकिंग संदर्भ का मूल तत्व ( <html>तत्व डिफ़ॉल्ट रूप से एकमात्र स्टैकिंग संदर्भ है, लेकिन स्टैकिंग संदर्भ के लिए कोई भी तत्व मूल तत्व हो सकता है, ऊपर दिए गए नियम देखें)
    • आप रूट स्टैकिंग संदर्भ तत्व के पीछे एक बाल तत्व नहीं रख सकते
  2. नकारात्मक जेड-इंडेक्स मान के साथ स्थिति वाले तत्व (और उनके बच्चे) (उच्च मान निचले मानों के सामने स्टैक्ड होते हैं; एचटीएमएल में उपस्थिति के अनुसार समान मूल्य वाले तत्व स्टैक किए जाते हैं)
  3. गैर-तैनात तत्व (HTML में उपस्थिति के आधार पर)
  4. ऑटो के एक जेड-इंडेक्स मान के साथ स्थिति वाले तत्व (और उनके बच्चे) (HTML में उपस्थिति के आधार पर)
  5. पॉजिटिव तत्वों (और उनके बच्चों) को पॉजिटिव z- इंडेक्स वैल्यू के साथ (उच्च मूल्यों को निचले मूल्यों के सामने स्टैक्ड किया जाता है; एचटीएमएल में उपस्थिति के अनुसार समान वैल्यू वाले तत्वों को स्टैक किया जाता है)
— Mr_Moneybags
स्रोत
3
कुछ को यह मददगार भी लग सकता है: व्हाट नो वन टेल यू यू अबाउट जेड-इंडेक्स
— मेंटलिस्ट
450

position: relative;# ओवर में जोड़ें

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
स्निपेट का विस्तार करें

बेला

— stephenmurdoch
स्रोत
14
updates.html5rocks.com/2012/09/… कैसे स्थिति के बारे में एक उत्कृष्ट संदर्भ है, z- सूचकांक के साथ पूर्ण और सापेक्ष बातचीत।
— क्या
@marflar मेरी खुशी। Btw, अपनी बेला पर एक नज़र रखना। अंत में एक अतिरिक्त टैग </body>और एक अतिरिक्त टैग </html>है।
— मिशेल अयर्स
2
यहाँ एक फिडेलिंग स्टैकिंग प्रसंग है। यह यहाँ समझाया गया है ।
— kdbanman
निकाला जा रहा है position: relativeसे अधिक तत्व से वास्तव में मेरे समस्या का समाधान हो।
— एलेक्स जी
Thanksssssss <3
— कार्ल एंथोनी बाल्योट
32

z- इंडेक्स केवल एक विशेष संदर्भ में relative, fixedया absoluteस्थिति के अनुसार काम करता है ।

एक रिश्तेदार div के लिए z- इंडेक्सz-index का पूरी तरह से या निश्चित div से कोई लेना देना नहीं है ।

EDIT यह एक अधूरा जवाब है। यह उत्तर गलत जानकारी प्रदान करता है। कृपया @ Dansingerman की टिप्पणी और नीचे दिए गए उदाहरण की समीक्षा करें।

— cusimar9
स्रोत
3
क्या आप इस बात पर विस्तार कर सकते हैं कि किसी विशेष संदर्भ में z-index कैसे काम करता है, और / या एक संदर्भ प्रदान करता है?
— डेनसिंगरमैन
13
z-index दो divs के क्रम को प्रभावित करता है भले ही एक स्थिति सापेक्ष हो और दूसरा निरपेक्ष हो।
— राफेल
65
यह उत्तर गलत है। यहाँ एक फिडेलिंग स्टैकिंग प्रसंग है जैसा कि यहाँ बताया गया है । @Dansingerman।
— kdbanman
1
आपके jsFiddle @kbdanman के लिए धन्यवाद, इसने मुझे एक दृश्य के साथ स्टैकिंग संदर्भ को समझने में मदद की।
— druvpatel
8
@JoeMorano, उच्चतर ज़ेड शीर्ष पर है, पूर्ण या सापेक्ष स्थिति की परवाह किए बिना। दस्तावेज़ पेड़ में स्तर क्या मायने रखता है। Divs 4, 5, 6 div 3 के बच्चे हैं, जबकि div 1 और 2 div 3 के भाई बहन हैं। Div 1 में div 3 की तुलना में एक उच्च z है, इसलिए div 1 div 3 और उसके सभी बच्चों के शीर्ष पर है। Div 2 का div 3 से कम z है, इसलिए div 3 और उसके सभी बच्चे div 2 के शीर्ष पर हैं
— kdbanman
31

चूँकि आपकी overdiv में स्थिति नहीं है, इसलिए z-index को यह पता नहीं है कि इसे कहाँ और कैसे करना है (और किस संबंध में?)। बस अपने ओवर डिव की स्थिति को सापेक्ष में बदलें, इसलिए उस डिव पर कोई दुष्प्रभाव नहीं होता है और फिर अंडर डिव आपकी मर्जी का पालन करेगा।

यहाँ आपका उदाहरण है jsfiddle: फिडल

संपादित करें : मैं देख रहा हूं कि किसी ने पहले ही इस उत्तर का उल्लेख कर दिया है!

— मैं गंभीर हूँ
स्रोत
18

दे दो #underएक नकारात्मक z-index, जैसे-1

ऐसा इसलिए होता है क्योंकि z-indexसंपत्ति को अनदेखा किया जाता है position: static;, जो कि डिफ़ॉल्ट मान होता है; इसलिए सीएसएस कोड आप ने लिखा है, z-indexहै 1कोई फर्क नहीं पड़ता कैसे उच्च आप इसे में सेट दोनों तत्वों के लिए #over।

#underएक नकारात्मक मूल्य देने से , यह किसी भी z-index: 1;तत्व के पीछे होगा , अर्थात #over।

— कार्लोस प्रीसीसो
स्रोत
मुझे भी यह समस्या थी - 'अंडर' डिव को 0 पर सेट करना मेरे लिए काम कर गया।
— मिक सेर जूल
5

मैं एक नौसेना मेनू बना रहा था। मेरे पास overflow: hiddenमेरी नौसेना की सीएसएस है जो सब कुछ छुपाती है। मुझे लगा कि यह एक जेड-इंडेक्स समस्या है, लेकिन वास्तव में मैं अपने नौसेना के बाहर सब कुछ छिपा रहा था।

— thedanotto
स्रोत
0

सीएसएस कल्पना में निर्धारित तत्वों (और निरपेक्ष तत्वों) का व्यवहार:

वे व्यवहार करते हैं जैसे कि वे दस्तावेज़ से अलग हो गए हैं, और निकटतम निश्चित / निरपेक्ष तैनात माता-पिता में रखे गए हैं। (शब्द उद्धरण द्वारा एक शब्द नहीं)

यह ज़िन्डेक्स गणना को थोड़ा जटिल बनाता है, मैंने अपनी समस्या (समान स्थिति) को गतिशील रूप से शरीर के तत्व में एक कंटेनर बनाकर और ऐसे सभी तत्वों को स्थानांतरित करके (जो कि शरीर-स्तर के तत्व के अंदर "मेरे-फिक्स्ड-लोग" के रूप में वर्ग-एड हैं) )

— बख्शी
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.