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

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

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

z अक्ष की एक दिलचस्प संपत्ति यह है कि इसकी कोई प्राकृतिक सीमा नहीं है। क्षैतिज और ऊर्ध्वाधर अक्ष आमतौर पर प्रदर्शन के अपेक्षित आकार द्वारा सीमित होते हैं। हम किसी भी आइटम को "बाईं ओर 1,000,000px" या "शीर्ष पर -3000em" में धकेलने की उम्मीद नहीं करते हैं: वे या तो अदृश्य हो जाएंगे या एक अप्रिय स्क्रॉल का कारण बनेंगे। (जब तक आप यह लेख उस समय नहीं पढ़ रहे होते हैं जब डिस्प्ले लाखों पिक्सेल चौड़े होते हैं। यदि ऐसा है, तो मैं आपसे आग्रह करता हूं कि आप पढ़ना बंद कर दें और एक ट्रिलियन डॉलर का वेब पेज प्रोजेक्ट शुरू करें।)

लेकिन z-index मान आयामहीन हैं और केवल सापेक्ष रूप में मायने रखते हैं: दो तत्वों वाला एक पेज एक ही दिखेगा यदि z इंडेक्स 1 और 2 या −10 और 999 । इस तथ्य के साथ कि पृष्ठों को अक्सर अलगाव में डिज़ाइन किए गए घटकों से इकट्ठा किया जाता है, इससे उपयुक्त जेड-इंडेक्स का चयन करने की उत्सुक कला होती है।

यह सुनिश्चित करने के लिए कि पेज पर सभी तत्वों के शीर्ष पर आपका कष्टप्रद पॉप-अप बिल्कुल दिखाई देता है यदि आपको नहीं पता कि कितने हैं, जिन्होंने उन्हें लिखा है, और वे शीर्ष पर कितना बनना चाहते हैं? जब आप अपना z- इंडेक्स 100 पर, या हो सकता है 999, या हो सकता है सिर्फ मामले में, 99999 पर सुनिश्चित करें कि आपका निश्चित रूप से जीत जाएगा।

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

डेटा पुनर्प्राप्ति

पहला कदम मौजूदा वेब पेजों से जेड-इंडेक्स मानों का एक बड़ा समूह इकट्ठा करना था। ऐसा करने के लिए, मैंने कॉमन क्रॉल की ओर रुख किया, जो इंटरनेट से पृष्ठों का एक सार्वजनिक, बहुत बड़ा और अद्भुत भंडार है। डेटा को S3 पर होस्ट किया गया है, इसलिए आप इसे AWS क्लस्टर से काफी कुशलता से अनुरोध कर सकते हैं। सौभाग्य से, इंटरनेट पर कई ट्यूटोरियल हैं जो बताते हैं कि यह कैसे करना है।

मेरे परिष्कृत z- इंडेक्स एक्सट्रैक्टर में निम्नलिखित नियमित अभिव्यक्ति के सभी मैचों के लिए हर पृष्ठ पर खोज शामिल है:

 re.compile(b'z-index *: *(-?[0-9]+|auto|inherit|initial|unset)') 

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

बहुत विस्तृत ब्लॉग लेख के लिए धन्यवाद , मैं इलास्टिक मैप रिड्यूस क्लस्टर पर कोड को तैनात करने में सक्षम था, और मैंने मार्च 2019 के लिए पेज संग्रह को स्कैन करना शुरू कर दिया। यह विशेष संग्रह 56,000 भागों में विभाजित है, जिनमें से मैंने यादृच्छिक रूप से 2,500, या लगभग 4.4% का चयन किया है। यह संख्या कुछ विशेष नहीं है, सिवाय इसके कि यह मोटे तौर पर उस मूल्य में अनुवाद करता है जिसे मैं इस प्रयोग में निवेश करने के लिए तैयार था। इस उम्मीद में भयानक रात के बाद कि मैंने पूर्वानुमान सही ढंग से नहीं बनाया है, मुझे 112.7 मिलियन पृष्ठों से परिणाम निकाले गए। (मुझे यह बताना होगा कि ये सभी HTML पृष्ठ हैं। मैंने इस प्रश्न को बहुत अधिक नहीं समझा है, लेकिन कॉमन क्रॉल बाहरी स्टाइलशीट को अनुक्रमणित नहीं करता है, और परिणामस्वरूप मैं केवल इनलाइन CSS से मान निकालता हूं। मैं पाठक को निर्धारित करने के लिए एक अभ्यास के रूप में छोड़ता हूं। क्या परिणामी वितरण बाहरी स्टाइल शीट से मिलता है)।

सबसे आम मूल्य

मेरे स्कैन से कुल 176.5 मिलियन z- इंडेक्स मान मिले, जिनमें से 36.2 हजार अनूठे हैं।

तो सबसे आम क्या हैं?

यह आंकड़ा शीर्ष 50 को दर्शाता है। ध्यान दें कि y अक्ष लघुगणकीय है और सापेक्ष आवृत्तियों को दर्शाता है। उदाहरण के लिए, 1 का सबसे आम मूल्य नमूना में पाए जाने वाले सभी घटनाओं का 14.6% है। सामान्य तौर पर, शीर्ष 50 एकत्रित मूल्यों का लगभग 80% है।



पहला अवलोकन यह है कि सकारात्मक मूल्य हावी हैं। शीर्ष 50 में एकमात्र नकारात्मक तत्व −1 (दूसरा सबसे आम 702 70 वां स्थान लेता है)। शायद यह हमें बताता है कि लोग आमतौर पर चीजों को पृष्ठभूमि में छिपाने की तुलना में ऊपर ले जाने में अधिक रुचि रखते हैं।

आमतौर पर, अधिकांश शीर्ष मानों में निम्न गुण होते हैं:

• वे छोटे हैं: उदाहरण के लिए, 0 से 12 तक सभी संख्या शीर्ष 50 में हैं।
  
• ये दस या कई संख्याओं की डिग्री हैं: 10, 100, 1000, 2000, ...
  
• वे दस की शक्ति के "पास": 1001, 999, 10001, ...

ये पैटर्न इस तथ्य के अनुरूप हैं कि लोग बड़े "परिचित" मान (दस की डिग्री) चुनते हैं, और फिर, शायद, घटक के अंदर सापेक्ष गहराई को समायोजित करने के लिए - मान थोड़ा अधिक या कम होता है।

यह सबसे आम मूल्यों को देखने के लिए भी दिलचस्प है जो इनमें से किसी भी पैटर्न में फिट नहीं होते हैं:

36 वें स्थान पर, हम 2147483647 देखते हैं। कई प्रोग्रामर तुरंत इस नंबर को INT_MAX रूप में पहचानते हैं, जो कि 2 ³¹ we1 है। लोग शायद इस तरह से बहस करते हैं: चूंकि यह एक (हस्ताक्षरित) पूर्णांक के लिए सबसे बड़ा मूल्य है, कोई जेड-इंडेक्स अधिक नहीं होगा, इसलिए सूचकांक INT_MAX के साथ मेरा तत्व हमेशा शीर्ष पर रहेगा। हालाँकि, MDN का कहना है कि CSS में पूर्णांक के बारे में निम्नलिखित हैं:

प्रकार के मूल्यों की कोई आधिकारिक सीमा नहीं है <integer> । ओपेरा 12.1 2 ¹⁵ -1, IE - 2 ²⁰ -1 तक के मूल्यों का समर्थन करता है, और अन्य ब्राउज़र भी अधिक हैं। CSS3 के मूल्यों के अस्तित्व के दौरान, न्यूनतम समर्थित सीमा को स्थापित करने पर कई चर्चाएं हुई हैं: अंतिम निर्णय अप्रैल 2012 में एलसी चरण के दौरान किया गया था, तब सीमा को अपनाया गया था [-2 ²⁷ -1; 2 ²⁷ -1], लेकिन अन्य मूल्यों का सुझाव दिया गया है, जैसे 2 ²⁴ -1 और 2 ³⁰ -1। हालांकि, इस समय नवीनतम विनिर्देश अब इस डेटा प्रकार के दायरे को इंगित नहीं करता है।

इस प्रकार, न केवल कोई सहमत अधिकतम मूल्य है, बल्कि INT_MAX वास्तव में प्रत्येक प्रलेखित विनिर्देश या मानक खंड में सीमा से बाहर है।

39 वें स्थान पर हमारे पास 8675309 हैं, जिसमें मैंने व्यक्तिगत रूप से कुछ भी उल्लेखनीय नहीं देखा है। लेकिन आधा मिलियन से अधिक डेवलपर्स के लिए, जाहिर है, यह समझ में आता है। मुझे संदेह है कि आप या तो तुरंत इस नंबर को पहचानते हैं, या आप इसके अर्थ को बिल्कुल नहीं समझते हैं कि आप कहां और कब बड़े हुए हैं। मैं स्पॉइलर नहीं दूंगा, इसका जवाब सिर्फ एक खोज के पीछे छिपा है।

पिछले दो नंबर, जो कि थोड़ा अनुचित लग रहा था, क्रमश: 42 वें और 45 वें स्थान पर 1030 और 1050 हैं। एक अन्य त्वरित रूप से पता चला कि ये बूटस्ट्रैप में navbar-fixed और modal कक्षाओं के लिए डिफ़ॉल्ट जेड-इंडेक्स मान हैं ।

मूल्यों का वितरण

हालांकि सभी z-index मूल्यों का विशाल हिस्सा कम है, लेकिन संकलित सेट के व्यापक वितरण को देखना दिलचस्प हो सकता है। उदाहरण के लिए, चित्रा 2 -120 और 260 के बीच सभी मूल्यों की आवृत्ति दर्शाता है।



गोल संख्याओं के प्रभुत्व के अलावा, हम कई स्तरों पर पैटर्न की लगभग भग्न गुणवत्ता देखते हैं। उदाहरण के लिए, दो स्थानीय मैक्सिमाओं के बीच का मध्य अक्सर स्वयं (छोटा) स्थानीय अधिकतम होता है: यह 1 से 10 के बीच 5, 15 से 10 और 20 के बीच, 50 से 1 और 100 के बीच होता है, आदि।

हम एक व्यापक श्रेणी पर इस आशय की पुष्टि कर सकते हैं: निम्नलिखित आंकड़ा -1200 से 2600 तक के सभी मानों की आवृत्तियों को दर्शाता है, एक छोटे मापांक से दस तक, अर्थात् 356 और 359 जैसी संख्याओं को 350 के रूप में गिना गया था। ग्राफ पिछले एक के समान है। जैसा कि आप देख सकते हैं, संरचना को मुख्य रूप से संरक्षित किया जाता है, जब मूल्यों को बड़े परिमाण का क्रम माना जाता है।



अंत में, अंतिम दृष्टांत में, 1 से 9999999999 तक के सभी सकारात्मक z-index मूल्यों को पहले अंक (क्षैतिज अक्ष) और अंकों की संख्या (ऊर्ध्वाधर अक्ष) द्वारा समूहीकृत किया जाता है।


पहले अंक और अंकों की संख्या के आधार पर सकारात्मक z-index मान। आयाम समूह की समग्र आवृत्ति के आनुपातिक हैं। अधिक जानकारी के लिए एक समूह पर क्लिक करें ।

हम प्रत्येक समूह को मूल्यों के एक टेम्पलेट के रूप में सहजता से प्रस्तुत कर सकते हैं, उदाहरण के लिए, सभी के साथ शुरू होने वाले सभी चार अंकों के मूल्यों के लिए 3xxx 3. प्रत्येक समूह को एक आयत के रूप में प्रदर्शित किया जाता है, जिसका आकार पैटर्न की आवृत्ति के लिए आनुपातिक है। यह दर्शाता है कि उदाहरण के लिए, कि परिमाण के प्रत्येक क्रम के लिए, यानी, कई समूहों में, आवृत्तियों का एक समान प्रवृत्ति का पालन होता है, जिसमें मान 1 से शुरू होने के साथ सबसे आम हैं, फिर 9, फिर 5।

प्रत्येक समूह का रंग उसकी एंट्रोपी के आधार पर स्थापित किया जाता है। पीले समूहों में सबसे अधिक एन्ट्रापी है, जबकि नीले समूहों में सबसे कम है। यह उन पैटर्नों को उजागर करने में मदद करता है जहाँ डेवलपर्स समान मूल्यों को चुनते हैं, या वे जहाँ मान अधिक समान रूप से वितरित किए जाते हैं (ध्यान दें कि हमारे पूरे डेटा सेट की एन्ट्रापी 6.51 बिट्स है)।

निष्कर्ष

हालाँकि इस डेटा सेट को इकट्ठा करना और तलाशना निश्चित रूप से दिलचस्प था, लेकिन मुझे यकीन है कि उत्पादन और प्रस्तुति के लिए बेहतर आंकड़े, दृश्य और स्पष्टीकरण हैं। यदि आप प्रयास करना चाहते हैं, तो z-index-data.csv फ़ाइल को डाउनलोड करने और वितरित करने के लिए स्वतंत्र महसूस करें।

शायद आप सफल होंगे जहां मैं असफल रहा और मुझे ग्राफ़ में शामिल उच्चतम z-index मान को शामिल करने का एक तरीका मिला, जो मुझे मिला १० ^१२४२ -1।

हां, संख्या 9 को 1242 बार दोहराया जाता है। मैं वास्तव में आशा करता हूं कि वे अंत में अपना <div> शीर्ष पर दिखाने में सक्षम थे।