Chrome 22 में, position:fixed एलिमेंट का लेआउट, पिछले वर्शन से थोड़ा अलग है. सभी position:fixed एलिमेंट अब नए स्टैकिंग कॉन्टेक्स्ट बनाते हैं. इससे कुछ पेजों के स्टैकिंग क्रम में बदलाव होगा. इस वजह से, पेज लेआउट खराब हो सकते हैं. यह नया तरीका, मोबाइल डिवाइसों (iOS Safari और Android के लिए Chrome) पर WebKit ब्राउज़र के काम करने के तरीके से मेल खाता है.
क्या स्टैक किया जा रहा है?
पेज पर एलिमेंट की डेप्थ ऑर्डरिंग तय करने के लिए, z-index का इस्तेमाल सभी लोग करते हैं और उन्हें यह पसंद भी है. हालांकि, सभी z-index एक जैसे नहीं होते: किसी एलिमेंट का z-index सिर्फ़ उसी स्टैकिंग कॉन्टेक्स्ट में मौजूद अन्य एलिमेंट के मुकाबले, उसके क्रम का पता लगाता है. किसी पेज पर ज़्यादातर एलिमेंट, एक ही रूट स्टैकिंग कॉन्टेक्स्ट में होते हैं. हालांकि, अपने-आप z-index वैल्यू के साथ पूरी तरह से या रिलेटिव तौर पर पोज़िशन किए गए एलिमेंट, अपने स्टैकिंग कॉन्टेक्स्ट बनाते हैं. इसका मतलब है कि उनके सभी चाइल्ड, पैरंट में z-क्रम में होंगे और पैरंट के बाहर के कॉन्टेंट के साथ इंटरलीव नहीं किए जाएंगे. Chrome 22 से, position:fixed एलिमेंट भी अपने स्टैकिंग कॉन्टेक्स्ट बनाएंगे.
स्टैकिंग कॉन्टेक्स्ट के बारे में खास जानकारी पाने के लिए, MDN का यह लेख पढ़ें.
position:fixed की तुलना new position:sticky एट्रिब्यूट से करें: रेफ़रंस के लिए, position:sticky हमेशा एक नया स्टैकिंग कॉन्टेक्स्ट बनाता है.
वजह
मोबाइल ब्राउज़र (Mobile Safari, Android ब्राउज़र, Qt-based ब्राउज़र), position:fixed एलिमेंट को अपने स्टैकिंग कॉन्टेक्स्ट में डालते हैं. ऐसा कुछ समय से (iOS5, Android Gingerbread वगैरह के बाद से) किया जा रहा है, क्योंकि इससे स्क्रोलिंग को ऑप्टिमाइज़ करने में मदद मिलती है. इससे वेब पेज, टच के लिए ज़्यादा रिस्पॉन्सिव बनते हैं. डेस्कटॉप वर्शन में यह बदलाव तीन वजहों से किया जा रहा है:
- "मोबाइल" और "डेस्कटॉप" ब्राउज़र पर रेंडरिंग का तरीका अलग-अलग होना, वेब लेखकों के लिए एक समस्या है. जब भी हो सके, सीएसएस को हर जगह एक जैसा काम करना चाहिए.
- टैबलेट के लिए, यह साफ़ तौर पर नहीं पता कि संदर्भ बनाने के लिए, "मोबाइल" या "डेस्कटॉप", दोनों में से कौनसा स्टैकिंग एल्गोरिदम ज़्यादा सही है.
- स्क्रोल करने की परफ़ॉर्मेंस को मोबाइल से डेस्कटॉप पर ऑप्टिमाइज़ करने से, उपयोगकर्ताओं और लेखकों, दोनों को फ़ायदा होता है.
बदलाव की खास जानकारी
यहां अलग-अलग लेआउट के व्यवहार को दिखाने वाला एक उदाहरण दिया गया है: https://codepen.io/paulirish/pen/CgAof
इस बदलाव के बाद, दोनों वर्शन दाईं ओर मौजूद वर्शन की तरह रेंडर होंगे.
इस उदाहरण में, हरे बॉक्स में z-index: 1, गुलाबी बॉक्स में z-index: 3, और नारंगी बॉक्स में z-index: 2 है. नीला बॉक्स, नारंगी बॉक्स का पूर्वज है और इसमें position:fixed है.
अगर नीले बॉक्स को स्टैकिंग कॉन्टेक्स्ट मिलता है, तो नारंगी बॉक्स के z-index का हिसाब, नीले बॉक्स के स्टैकिंग कॉन्टेक्स्ट के हिसाब से लगाया जाता है. नीले बॉक्स का z-index auto है, जिससे उसे रूट स्टैकिंग कॉन्टेक्स्ट में स्टैकिंग लेवल शून्य मिलता है. इसका मतलब है कि नारंगी बॉक्स, हरे और गुलाबी बॉक्स के पीछे दिखता है. हरे और गुलाबी बॉक्स का z-index, रूट कॉन्टेक्स्ट में क्रमशः 1 और 3 है.
अगर नीले बॉक्स को स्टैकिंग का अपना कॉन्टेक्स्ट नहीं मिलता है, तो नारंगी बॉक्स के z-index का हिसाब, हरे और गुलाबी बॉक्स के साथ-साथ रूट स्टैकिंग कॉन्टेक्स्ट के हिसाब से लगाया जाता है. इसलिए, नारंगी बॉक्स, गुलाबी और हरे बॉक्स के बीच में आ जाता है.
स्टैकिंग कॉन्टेक्स्ट बनाने की ज़रूरी शर्तों और स्टैकिंग कॉन्टेक्स्ट के सामान्य तरीके के बारे में ज़्यादा जानने के लिए, MDN का यह लेख पढ़ें. उदाहरण में, दाईं ओर मौजूद वर्शन में नीले बॉक्स को हमेशा स्टैकिंग का अपना कॉन्टेक्स्ट दिया जाता है, क्योंकि उसकी ओपैसिटी 1 से कम है. व्यवहार में होने वाले इस बदलाव से, अलग स्टैकिंग कॉन्टेक्स्ट बनाने के लिए एक और शर्त जुड़ जाती है. जैसे, एलिमेंट का position:fixed होना.
टेस्टिंग और आने वाला समय
यह जांचने के लिए कि आपका पेज बदलेगा या नहीं, Chrome के about:flags पर जाएं और "तय की गई जगह के एलिमेंट, स्टैकिंग कॉन्टेक्स्ट बनाते हैं" को चालू/बंद करें. अगर आपका लेआउट दोनों मामलों में एक जैसा दिखता है, तो आपका काम हो गया. अगर ऐसा नहीं है, तो पक्का करें कि फ़्लैग चालू होने पर, आपको यह सुविधा पसंद आए. ऐसा इसलिए, क्योंकि Chrome 22 में यह सुविधा डिफ़ॉल्ट रूप से चालू होगी.
इस बदलाव से एक सुविधा हट जाएगी - position:fixed सबट्री में, बाहर से आने वाले ऐसे कॉन्टेंट को इंटरलीव करने की सुविधा जो स्क्रोल नहीं होता. ऐसा हो सकता है कि कोई वेब डेवलपर जान-बूझकर ऐसा न कर रहा हो. हालांकि, एक ही असर को कई position:fixed एलिमेंट को DOM के अलग-अलग हिस्सों में देकर भी बनाया जा सकता है. उदाहरण के लिए, इन दो उदाहरणों पर ध्यान दें:
https://codepen.io/wiltzius/pen/gcjCk
इस पेज में, position:fixed एलिमेंट के दो चाइल्ड डिव (overlayA और overlayB) को एक अलग कॉन्टेंट डिव के ऊपर और एक को उसी कॉन्टेंट डिव के नीचे रखने की कोशिश की गई है. अब ऐसा करना मुमकिन नहीं है, क्योंकि position:fixed एलिमेंट का अपना स्टैकिंग कॉन्टेक्स्ट होता है. साथ ही, यह अपने सभी चाइल्ड के साथ, कॉन्टेंट डिव के ऊपर या नीचे ही होगा. ध्यान दें कि यह उदाहरण Chrome 21 और उससे पहले के वर्शन में काम करता है, लेकिन Chrome 22 में नहीं.
इसे ठीक करने के लिए, दोनों ओवरले को अपनी स्थिति:फ़िक्स किए गए एलिमेंट में बांटा जा सकता है. हर एक का अपना स्टैकिंग कॉन्टेक्स्ट होता है. इनमें से एक, कॉन्टेंट डिव के ऊपर और दूसरा, कॉन्टेंट डिव के नीचे जा सकता है. ठीक किया गया उदाहरण देखें, जो Chrome 21 और 22 में काम करता है:
https://codepen.io/wiltzius/pen/vhFzG
इस उदाहरण का क्रेडिट, अनूठा hixie को जाता है.
Chrome, ऐसा पहला डेस्कटॉप ब्राउज़र है जो position:fixed एलिमेंट को स्टैकिंग कॉन्टेक्स्ट बनाने की सुविधा देता है. सीएसएस z-index स्पेसिफ़िकेशन, काम का स्टैंडर्ड है. उदाहरण के लिए, https://www.w3.org/TR/CSS21/zindex.html देखें. फ़िलहाल, इस बात पर सहमति नहीं बनी है कि मोबाइल और डेस्कटॉप ब्राउज़र के बीच के अंतर को कैसे ठीक किया जाए. हालांकि, मोबाइल और डेस्कटॉप पर अलग-अलग तरह से काम करने की वजह से होने वाली परेशानी को देखते हुए, Chrome ने फ़िलहाल दोनों प्लैटफ़ॉर्म पर एक ही तरह से काम करने का विकल्प चुना है.
1 अक्टूबर, 2012 को अपडेट किया गया: इस लेख के ओरिजनल वर्शन में बताया गया था कि position: fixed एलिमेंट के नए व्यवहार को दिखाने के लिए, सीएसएस z-index स्पेसिफ़िकेशन पहले ही बदल दिया गया था. यह गलत है. इस बारे में www-style सूची में चर्चा की गई है, लेकिन अब तक स्पेसिफ़िकेशन में कोई बदलाव नहीं किया गया है.