शायद हम में से हर एक ने अपने जीवन में कम से कम एक बार z-index संपत्ति का उपयोग किया। इसके अलावा, प्रत्येक डेवलपर को यकीन है कि वह जानता है कि यह कैसे काम करता है। वास्तव में, पूर्णांकों के साथ संचालन की तुलना में सरल क्या हो सकता है (तत्वों की तुलना और उन्हें असाइन करना)। लेकिन क्या सब कुछ इतना सरल है जितना पहली नज़र में लगता है?
शायद जो जानकारी मैं नीचे कवर करूंगा वह वास्तव में तुच्छ है। हालांकि, मुझे यकीन है कि कई लोग इसे अपने लिए उपयोगी पाएंगे। जिन लोगों को पहले से ही इसके बारे में पता था, वे इस पाठ को मुश्किल समय में एक धोखा पत्र के रूप में उपयोग करने में सक्षम होंगे। तो बिल्ली में आपका स्वागत है।
वास्तव में, एक व्यक्ति आमतौर पर तीन मामलों में खुद के लिए एक नया क्षेत्र छाँटने की कोशिश करने लगता है: यदि वह काम पर अप्रत्याशित परिणाम प्राप्त करता है और समझ नहीं पाता है कि क्या हो रहा है; अगर एक अलग कोण से विषय को देखने और उससे परे जाने की आवश्यकता है; और अंत में, खेल के हित से बाहर है।
मेरा मामला स्पष्ट रूप से तीसरी श्रेणी का नहीं है। सबसे पहले, मेरे जीवन में कई बार मैं विभिन्न परियोजनाओं पर काम करते हुए पहले परिदृश्य में आया; हालाँकि, उन्होंने आलस और उदाहरणों के साथ स्पष्ट और समझने योग्य सामग्रियों की कमी के कारण इस मुद्दे को पूरी तरह से नहीं समझा। और फिर इस वर्ष की शुरुआत में, मैंने एक वेब इंजन लिखना शुरू किया, जिसने मुझे मानकों को पढ़ना शुरू कर दिया और आम तौर पर देखा
कि लोकप्रिय ब्राउज़रों में गैर-तुच्छ चीजें
कैसे काम करती हैं, और सबसे महत्वपूर्ण बात यह है
कि वे इस तरह से
क्यों काम करते हैं।
चलो एक साधारण से शुरू करते हैं। Z- इंडेक्स क्या है और इसके लिए क्या है?
जाहिर है, यह कुछ तत्व के लिए निर्दिष्ट जेड अक्ष के साथ समन्वय है। Z अक्ष को उपयोगकर्ता की ओर निर्देशित किया जाता है। एक बड़ी संख्या एक करीब तत्व है।
जेड-इंडेक्स नंबर पूर्णांक क्यों हैं? सब कुछ सरल है। सीमा शीर्ष और निचले भाग में व्यावहारिक रूप से असीमित है, इसलिए हमें भिन्नात्मक मूल्यों का उपयोग करने की आवश्यकता नहीं है। चूंकि वास्तविक मॉनिटर का तीसरा आयाम नहीं है (हम केवल इसे अनुकरण कर सकते हैं), हमें कुछ आयाम रहित मात्रा की आवश्यकता है, जिनमें से एकमात्र कार्य तत्वों की तुलना प्रदान करना है (अर्थात, सेट का क्रम)। इंटेगर इस कार्य का एक उत्कृष्ट कार्य करते हैं, जबकि वे वास्तविक लोगों की तुलना में अधिक दृश्य हैं।
ऐसा लगता है कि यह ज्ञान पृष्ठों पर जेड-इंडेक्स का उपयोग शुरू करने के लिए पर्याप्त है। हालांकि, सब कुछ इतना सरल नहीं है।
<div style="background: #b3ecf9; z-index: 1"></div> <div style="background: #b3ecb3; margin-top: -86px; margin-left: 38px; z-index: 0"></div>
लगता है कुछ गड़बड़ हो गई है। हमने पहले ब्लॉक को दूसरे की तुलना में जेड-इंडेक्स बनाया है, इसलिए इसे नीचे प्रदर्शित किया गया है? हां, यह पहले कोड के माध्यम से जाता है - लेकिन ऐसा लगेगा कि यह केवल समान z- इंडेक्स मानों के साथ एक भूमिका निभानी चाहिए।
इस बिंदु पर, यह ओवरले संदर्भों के प्रसंस्करण के संबंध में CSS2.1 मानक, या इसके बजाय एप्लिकेशन को खोलने का समय है। यहाँ
लिंक है ।
इस छोटे और बहुत संक्षिप्त पाठ से आप तुरंत कई महत्वपूर्ण जानकारी निकाल सकते हैं।
- z- इंडेक्स कंट्रोल ओवरले व्यक्तिगत तत्वों पर नहीं, बल्कि ओवरले संदर्भ (तत्वों के समूह)
- हम मनमाने ढंग से एक दूसरे के सापेक्ष विभिन्न संदर्भों में तत्वों को नियंत्रित नहीं कर सकते हैं: यहां पदानुक्रम काम करता है। यदि हम पहले से ही "कम" संदर्भ में हैं, तो हम इसे "उच्च" संदर्भ के तत्व से ऊपर का तत्व नहीं बना सकते।
- z-index एक सामान्य स्ट्रीम में तत्वों के लिए बिल्कुल भी समझ में नहीं आता है (जिसके लिए स्थिति संपत्ति स्थिर है)। हम ऊपर के उदाहरण में इस जाल में गिर गए।
- नए ओवरले संदर्भ को परिभाषित करने के लिए एक तत्व के लिए, इसे पोस्ट किया जाना चाहिए और इसे एक जेड-इंडेक्स सौंपा जाना चाहिए।
- यदि तत्व तैनात है, लेकिन जेड-इंडेक्स सेट नहीं है, तो हम सशर्त रूप से मान सकते हैं कि यह शून्य के बराबर है (साधारण मामलों के लिए यह इस तरह काम करता है, हम बाद में बारीकियों पर विचार करेंगे)।
- और व्यक्तिगत ओवरले संदर्भ एक से कम अपारदर्शिता मूल्य वाले तत्वों द्वारा निर्धारित किए जाते हैं। यह इसलिए किया गया ताकि आप वीडियो कार्ड द्वारा प्रसंस्करण के लिए रेंडरिंग के अंतिम चरण में आसानी से अल्फा सम्मिश्रण को स्थानांतरित कर सकें।
लेकिन यह सब नहीं है। यह पता चला है कि जेड-इंडेक्स के बिना तत्वों के साथ यह इतना सरल भी नहीं है जितना यह लग सकता है।
संदर्भ सबट्री के तत्वों के प्रतिपादन की प्रक्रिया को कई चरणों में विभाजित किया जा सकता है (जिनमें से पहले दो संदर्भ को सेट करने वाले वर्तमान तत्व की पृष्ठभूमि के रंग और पृष्ठभूमि छवि को सीधे आउटपुट कर रहे हैं)।
तो, पूरी सूची पर विचार करें।
3. नकारात्मक z- सूचकांक के साथ बाल संदर्भों की व्युत्पत्ति
4. एक सामान्य प्रवाह में बाल ब्लॉक तत्वों का उत्पादन (केवल पृष्ठभूमि)
5. बच्चे के फ्लोट तत्वों का उत्पादन
6. एक सामान्य धारा में तत्वों की सामग्री का उत्पादन: इनलाइन और इनलाइन-ब्लॉक वंशज, ब्लॉक अवरोही के अंदर इनलाइन सामग्री, पाठ * की पंक्तियों सहित
7. शून्य और ऑटो z- इंडेक्स के साथ बाल संदर्भों का उत्पादन **
8. सकारात्मक z- सूचकांक के साथ बच्चे के संदर्भों की व्युत्पत्ति
* गहराई-पहले पेड़ को पार करने के लिए
** z- इंडेक्स वाले संदर्भों के लिए: ऑटो, सभी बाल संदर्भों को वर्तमान संदर्भ के वंशज के रूप में मानते हैं, अर्थात वर्तमान स्तर तक उन्हें "खींच"।
पहले से ही इतना आसान नहीं है, है ना? आप निम्न चित्र के साथ इस योजना का वर्णन कर सकते हैं:
कोडपेन पर एक उदाहरण
खोलना और अपने हाथों से इसके साथ खेलना भी संभव है।
लेकिन यह सब नहीं है। ऐसा लगता है कि एल्गोरिथ्म पहले से ही काफी जटिल है: हमें पहले छद्म संदर्भों के अंदर बच्चे के संदर्भों को खींचने की जरूरत है (मूल्य ऑटो याद है?), फिर दो z- इंडेक्स सूची के लिए क्रमबद्ध करें, उन्हें एक संख्या श्रृंखला में व्यवस्थित करें, फिर बच्चों के माध्यम से जाएं: पहला, ब्लॉक? एक सामान्य स्ट्रीम में, फिर फ्लोटिंग, फिर इनलाइन और इनलाइन-ब्लॉक ...
लेकिन यहां हम दो आश्चर्य का इंतजार कर रहे हैं। भाग्य के साथ पहला, हमारी चिंता नहीं करेगा। यह इस तथ्य से जुड़ा है कि फ़्रेम के साथ पृष्ठभूमि और ब्लॉक तत्वों की सामग्री अलग-अलग चरणों में प्रदर्शित होती है - लेकिन अगर प्रत्येक पाठ नोड के लिए हमारा स्व-निर्मित इंजन स्वचालित रूप से इनलाइन तत्व बनाता है, तो सब कुछ ठीक होगा, वे स्वाभाविक रूप से बाद में प्रदर्शित होंगे।
लेकिन दूसरा इतना तुच्छ नहीं है। यह चिह्नित है
इनमें से प्रत्येक के लिए, तत्व का इलाज करें जैसे कि यह एक नया स्टैकिंग संदर्भ बनाता है, लेकिन किसी भी तैनात वंशज और वंशज जो वास्तव में एक नया स्टैकिंग संदर्भ बनाते हैं, को मूल स्टैकिंग संदर्भ का हिस्सा माना जाना चाहिए, यह नया नहीं।
फ्लोट और इनलाइन-ब्लॉक / इनलाइन (लेकिन ब्लॉक नहीं!) तत्व।
व्यवहार में इसका क्या अर्थ है? और इसका मतलब है कि हमें उन्हें उसी तरह से संसाधित करना चाहिए जैसे कि z- इंडेक्स वाले तत्वों: ऑटो। यही है, सबसे पहले, उनके उप-भागों के चारों ओर जाएं और मौजूदा स्तर पर उन्हें रखने से बाल संदर्भों को बाहर निकालें। लेकिन बाकी लोगों के लिए, हमें उन तत्वों के रूप में व्यवहार करना चाहिए जो हमारे संदर्भ को परिभाषित करते हैं।
इसका मतलब यह है कि एक रेखीय सूची में एक क्रॉल के बाद खींचे गए उनके अंदर सभी उप-प्रकार, परमाणु रहना चाहिए। या, दूसरे शब्दों में, हम तत्वों के क्रम में फेरबदल नहीं कर सकते हैं ताकि इस तरह के तत्व के वंशज अपने माता-पिता के ऊपर "तैर" सकें। और अगर बाल संदर्भों के लिए यह सहज रूप से स्पष्ट है (क्योंकि एल्गोरिदम पुनरावर्ती है), तो यहां ऐसा नहीं है।
इसलिए, इंजन कोड लिखते समय, हमें खुद को ट्रिक करना होगा ताकि समय के लिए फ्लोट, इनलाइन और इनलाइन-ब्लॉक तत्व अपने वंशज (स्थिति और जेड-इंडेक्स वाले बच्चों के अपवाद के साथ, जो ओवरले कॉन्ट्रास्ट का निर्माण न करें) प्रकट करें, और फिर उनके लिए दौड़ें संपूर्ण फ़ंक्शन पुनरावर्ती है, लेकिन इसके विपरीत, इस तथ्य को ध्यान में रखते हुए कि बाल संदर्भों को एक आघात के दौरान छोड़ दिया जाना चाहिए।
इस घटना को प्रदर्शित करने के लिए कुछ उदाहरण:
<div style="float: left; background: #b3ecf9;"> <div style="width: 40px; height: 40px; background: #fff700; position: relative; z-index: -1; top: -20px; left: -20px;"></div> </div>
यहां बच्चे के पास z- इंडेक्स है और उसे तैनात किया गया है। यह पॉप अप करता है, लेकिन एक नीले वर्ग के तहत प्रदर्शित किया जाता है, क्योंकि नकारात्मक जेड-इंडेक्स वाले तत्व चरण 3 में प्रदर्शित होते हैं, और चरण 5 में फ्लोट तत्व होते हैं।
<div style="float: left; margin-top: -30px; background: #b3ecf9;"> <div style="width: 40px; height: 40px; background: #fff700; position: relative; z-index: 0;"></div> </div> <div style="background: #b3ecb3; margin-top: 52px; margin-left: 38px;"> <div style="width: 40px; height: 40px; background: #ff0000; position: relative; z-index: 0;"></div> </div>
इस उदाहरण में, दूसरा तत्व (हरा) पहले (नीला) से पहले प्रदर्शित होता है, और इसलिए नीचे। हालांकि, बच्चों को खींच लिया जाता है (क्योंकि वे अपने स्वयं के संदर्भ सेट करते हैं), इसलिए इस मामले में वे उसी क्रम में जाते हैं जिसमें वे मूल पेड़ में जाते हैं (क्रमचय के बाद उनके पूर्वजों का क्रम महत्वपूर्ण नहीं है!)। यदि हम पहले बच्चे को 1 के बराबर z- इंडेक्स पर सेट करते हैं, तो हमें निम्न चित्र मिलता है:
अधिक तत्व जोड़ें।
<div style="float: left; background: #b3ecf9;"> <div style="float: left"> <div style="width: 40px; height: 40px; background: #fff700; position: relative; z-index: 0;"></div> </div> </div> <div style=" background: #b3ecb3; margin-top: 32px; margin-left: 40px;"> <div style="position: relative"> <div style="width: 40px; height: 40px; background: #ff0000; position: relative; z-index: 0;"></div> </div> </div>
यहां, बाल संदर्भों को फ्लोट्स और साधारण ब्लॉकों दोनों से खींचा जाता है, जबकि आदेश संरक्षित है क्योंकि यह मूल पेड़ में था।
अंत में, अंतिम उदाहरण:
<div style="background: #b3ecf9;"> <div style="display: inline-block; width: 40px; height: 40px; background: #fc0;"></div> </div> <div style="background: #b3ecb3; margin-top: -100px; margin-left: 22px;"></div>
जैसा कि आप देख सकते हैं, एक ब्लॉक तत्व का "जंपिंग आउट" अन्य मामलों के विपरीत है, काफी संभव है, और चूंकि हमारे पास इनलाइन-ब्लॉक तत्व पॉप अप है, इसलिए यह इस दस्तावेज़ में अंतिम होगा।
जैसा कि आप देख सकते हैं, जेड-इंडेक्स आपको कई दिलचस्प चालें करने की अनुमति देता है (जो कि बच्चे पर नकारात्मक जेड-इंडेक्स का उपयोग करके अपने तत्काल माता-पिता के तहत तत्व को छिपाने के लायक है)। मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी रहा होगा।