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