पोजिशनिंग और z-index

docs.scrimba.com

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

position प्रॉपर्टी

हर एलिमेंट static पोजिशनिंग के साथ शुरू होता है, जो कहने का एक सादा तरीका है "पेज के फ्लो में अपनी सामान्य जगह में बैठो"। यह डिफ़ॉल्ट है, और ज्यादातर समय यह वही है जो आप चाहते हैं। पोजिशनिंग तब महत्वपूर्ण हो जाती है जब आप एलिमेंट को उस सामान्य जगह से हटाना चाहते हैं।

पहला कदम position: relative है। यह एलिमेंट को चार ऑफसेट प्रॉपर्टीज के साथ जहां यह सामान्य रूप से बैठता है वहां से हटाता है: top, right, bottom, और left। मुख्य बात यह है कि एलिमेंट अपनी मूल जगह रखता है। कोई और चीज गैप को भरने के लिए नहीं हटती।

.badge {
  position: relative;
  top: 10px;                 /* अपनी सामान्य जगह से 10px नीचे दबाया गया */
  left: 20px;                /* अपनी सामान्य जगह से 20px दाईं ओर दबाया गया */
}

ये top और left ऑफसेट एक static एलिमेंट पर कुछ नहीं करते। वे तभी काम करना शुरू करते हैं जब आप एलिमेंट को static के अलावा कोई position दें।

पेज पर सब कुछ position: static के साथ शुरू होता है, display और document flow में आपकी मुलाकात के सामान्य ऊपर-से-नीचे फ्लो में इसकी जगह। Static एलिमेंट्स ऑफसेट प्रॉपर्टीज को पूरी तरह से अनदेखा करते हैं, इसलिए उन पर top या left सेट करने से कुछ नहीं होता। यह लोगों को फंसाता है: वे top: 20px जोड़ते हैं, कोई परिवर्तन नहीं देखते हैं, और मान लेते हैं कि वैल्यू गलत है जबकि असली समस्या एक लापता position है।

कोमल विकल्प relative पोजिशनिंग है। यह एलिमेंट को आप जो ऑफसेट देते हैं उससे अपनी सामान्य जगह से शिफ्ट करता है, जबकि इसकी मूल जगह फ्लो में रिजर्व रहती है। पड़ोसी गैप को बंद करने के लिए नहीं हटते, इसलिए एक relatively पोजिशन्ड एलिमेंट अपने बगल में जो कुछ है उसके साथ ओवरलैप कर सकता है।

.tooltip {
  position: relative;
  top: -4px;                 /* जहां यह बैठता वहां से 4px ऊपर उठाया गया */
  left: 8px;                 /* दाईं ओर 8px बढ़ाया गया */
  /* आरक्षित जगह जगह पर रहती है; केवल पेंट चलता है */
}

top और left जैसे ऑफसेट केवल तभी लागू होते हैं जब एलिमेंट पोजिशन्ड हो। अपने आप पर, relative एक छोटा हटाने वाला टूल है। इसका अधिक महत्वपूर्ण काम absolutely पोजिशन्ड बच्चों के लिए एक संदर्भ बिंदु सेट करना है, जो अगला सेक्शन है।

position प्रॉपर्टी के पाँच वैल्यूज हैं, और पूरे मॉडल को पकड़ना एक सवाल से आसान है: क्या एलिमेंट अभी भी सामान्य फ्लो में जगह लेता है? static (प्रारंभिक वैल्यू) और relative दोनों लेते हैं; absolute और fixed नहीं; sticky एक हाइब्रिड है जो जैसे-जैसे आप स्क्रॉल करते हैं दोनों व्यवहारों के बीच स्विच करता है।

relative static से सबसे हल्का प्रस्थान है। एलिमेंट सामान्य फ्लो में बिल्कुल वैसे ही लेआउट होता है जैसे कि यह static थे, इसकी जगह उस मूल लोकेशन पर रिजर्व की जाती है, और फिर यह top / right / bottom / left से उस पोजिशन से विज़ुअली ऑफसेट होता है। क्योंकि आरक्षित जगह कभी नहीं हटती, एक relative एलिमेंट को ऑफसेट करने से केवल यह पता चलता है कि यह कहां पेंट होता है, लेआउट सोचता है कि यह कहां है नहीं, इसलिए यह आसन्न कंटेंट के साथ ओवरलैप कर सकता है किसी चीज को धकेले बिना।

.list-item {
  position: relative;
  top: 6px;                  /* 6px नीचे पेंट किया गया; इसकी फ्लो स्लॉट जगह पर रहती है */
}

दो प्रिसिजन पॉइंट्स। पहला, ऑफसेट एलिमेंट की अपनी सामान्य पोजिशन के विरुद्ध रिजॉल्व करते हैं, किसी एंसेस्टर के विरुद्ध नहीं: top: 10px का मतलब है "जहां आप अन्यथा होते वहां से 10px नीचे", "कंटेनर के शीर्ष से 10px" नहीं। दूसरा, यदि आप एक relative एलिमेंट पर विरोधी ऑफसेट सेट करते हैं (top और bottom, या left और right), तो start-side एक left-to-right, top-to-bottom राइटिंग मोड में जीतता है, इसलिए top bottom को ओवरराइड करता है और left right को ओवरराइड करता है। relative के लिए पहुंचने का कहीं अधिक आम कारण बिल्कुल भी हटाना नहीं है; यह absolute डिसेंडेंट्स के लिए एक कंटेनिंग ब्लॉक स्थापित करना है, जो अगला सेक्शन बनाता है।

Junoposition प्रॉपर्टी सब कुछ static के रूप में शुरू होता है, जिसका अर्थ है कि यह अपनी सामान्य जगह में बैठता है। position: relative पर स्विच करें और आप इसे top, right, bottom, और left से हटा सकते हैं, जबकि इसकी मूल जगह रिजर्व रहती है। ये ऑफसेट प्रॉपर्टीज तब तक कुछ नहीं करतीं जब तक एलिमेंट पोजिशन्ड न हो, इसलिए अगर top को नजरअंदाज किया गया प्रतीत होता है, तो जांचें कि आपने पहले एक position सेट किया है।

Junoposition प्रॉपर्टीstatic डिफ़ॉल्ट है और ऑफसेट को पूरी तरह से अनदेखा करता है, यही कारण है कि एक सादे एलिमेंट पर top: 20px कुछ नहीं करता। relative एलिमेंट को अपनी सामान्य जगह से हटाता है जबकि इसकी जगह रिजर्व रखता है, इसलिए पड़ोसी कभी गैप को भरने के लिए नहीं हटते। हटाना हैंडी है, लेकिन आप relative के लिए पहुंचने का असली कारण absolutely पोजिशन्ड बच्चों को एंकर करना है, आगे आ रहा है।

Junoposition प्रॉपर्टी पाँच वैल्यूज को इस बात से सॉर्ट करें कि क्या वे फ्लो में अपनी जगह रखते हैं: static और relative रखते हैं, absolute और fixed नहीं, sticky दोनों के बीच फ्लिप करता है। relative ऑफसेट एलिमेंट की अपनी सामान्य पोजिशन के विरुद्ध रिजॉल्व करते हैं, इसके कंटेनर के विरुद्ध नहीं, और विरोधी ऑफसेट start side को जीतने देते हैं। आप relative को एक हटाने वाला टूल होने के बजाय absolute बच्चों के लिए एंकर के रूप में कहीं अधिक उपयोग करेंगे।

Absolute पोजिशनिंग

position: absolute एक बड़ा कदम है। यह एलिमेंट को सामान्य फ्लो से पूरी तरह से बाहर निकाल देता है, इसलिए यह अब कोई जगह नहीं लेता है, और इसके चारों ओर के एलिमेंट्स बंद हो जाते हैं जैसे कि यह कभी था ही नहीं। फिर आप इसे उसी top, right, bottom, और left ऑफसेट का उपयोग करके रखते हैं।

सवाल यह है: कहां से ऑफसेट? एक absolute एलिमेंट अपने निकटतम positioned एंसेस्टर के विरुद्ध पोजिशन करता है, अर्थात सबसे करीबी पैरेंट जिसके पास अपना position है (static के अलावा कोई भी)। यही कारण है कि badge-on-a-card पैटर्न हमेशा एक जोड़ी में आता है: आप कार्ड को relative बनाते हैं ताकि यह संदर्भ बिंदु बन जाए, फिर बैज को absolute बनाते हैं ताकि यह कार्ड के कोने में बैठ सके।

.card {
  position: relative;        /* संदर्भ बिंदु बन जाता है */
}

.card .badge {
  position: absolute;
  top: 8px;                  /* कार्ड के शीर्ष से 8px */
  right: 8px;                /* कार्ड के दाईं ओर से 8px */
}

कार्ड पर position: relative के बिना, बैज पेज के ऊपर एक पोजिशन्ड एंसेस्टर की खोज करेगा और कहीं उतरेगा जहां आप का इरादा नहीं था।

Absolute पोजिशनिंग एलिमेंट को सामान्य फ्लो से पूरी तरह से हटाता है। यह कोई जगह नहीं लेता है, इसके पूर्व पड़ोसी एक साथ गिर जाते हैं जैसे कि यह चला गया हो, और फिर आप इसे ऑफसेट प्रॉपर्टीज के साथ रखते हैं। ऑफसेट एलिमेंट के कंटेनिंग ब्लॉक के विरुद्ध मापे जाते हैं: इसका निकटतम एंसेस्टर जो स्वयं पोजिशन्ड है।

वह "निकटतम positioned एंसेस्टर" नियम उस पैटर्न का दिल है जिसे आप लगातार उपयोग करेंगे। पैरेंट को position: relative सेट करें (जो अपने आप से कोई विज़ुअल परिवर्तन नहीं करता है), और यह इसके अंदर किसी भी absolute बच्चों के लिए संदर्भ फ्रेम बन जाता है।

.dropdown {
  position: relative;        /* संदर्भ फ्रेम, कोई विज़ुअल परिवर्तन नहीं */
}

.dropdown .menu {
  position: absolute;
  top: 100%;                 /* ट्रिगर के सीधे नीचे */
  left: 0;                   /* इसके बाएं किनारे के साथ संरेखित */
  width: 200px;
}

यदि कोई एंसेस्टर पोजिशन्ड नहीं है, तो absolute एलिमेंट प्रारंभिक कंटेनिंग ब्लॉक पर वापस गिरता है, लगभग व्यूपोर्ट, और आमतौर पर पेज के शीर्ष-बाएं में समाप्त होता है। एक गलत जगह पर रखा गया absolute एलिमेंट लगभग हमेशा पैरेंट पर एक लापता position: relative होता है जहां आप इसे एंकर करना चाहते थे।

एक absolutely पोजिशन्ड एलिमेंट को सामान्य फ्लो से बाहर निकाल दिया जाता है: यह फ्लो में कोई बॉक्स उत्पन्न नहीं करता है, इसके पैरेंट की ऊंचाई में योगदान नहीं देता है, और इसके siblings उस तरह लेआउट करते हैं जैसे यह मौजूद नहीं है। यह तब अपने कंटेनिंग ब्लॉक के सापेक्ष पोजिशन होता है, और कंटेनिंग-ब्लॉक नियमों को सटीक रूप से प्राप्त करना "यह काम करता है" को "यह काम करता है और मैं जानता हूं कि क्यों" से अलग करता है।

एक absolute एलिमेंट के लिए, कंटेनिंग ब्लॉक इसके निकटतम एंसेस्टर का पैडिंग बॉक्स है जिसका position static नहीं है। यदि कई एंसेस्टर योग्य हैं, तो निकटतम जीतता है। यदि कोई नहीं है, तो कंटेनिंग ब्लॉक प्रारंभिक कंटेनिंग ब्लॉक है, एक व्यूपोर्ट आकार का आयत जो दस्तावेज़ के लिए एंकर है, यही कारण है कि एक अनंकर्ड absolute एलिमेंट पेज के top-left में बहता है।

.field {
  position: relative;        /* कंटेनिंग ब्लॉक स्थापित करता है */
  padding: 12px;
}

.field .clear-button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);   /* .field के विरुद्ध लंबवत केंद्र */
  /* ऑफसेट .field के content box नहीं, इसके padding box से मापे जाते हैं */
}

एक नियम जो लोगों को आश्चर्यचकित करता है और advanced कंटेनिंग-ब्लॉक चित्र के लिए मायने रखता है: एक एंसेस्टर पर एक transform, filter, या will-change भी absolute डिसेंडेंट्स के लिए एक कंटेनिंग ब्लॉक स्थापित करता है, बिना एक position सेट किए। इसलिए एक absolute बच्चा अचानक एक transformed दादा-दादी पर अपने ऑफसेट को फिर से माता-पिता बना सकता है जिसे आप एंकर के रूप में नहीं सोचते थे। जब एक absolute एलिमेंट गलत एलिमेंट के विरुद्ध पोजिशन करता है, तो केवल position के लिए नहीं बल्कि ट्री के ऊपर एक stray transform के लिए जांचें।

JunoAbsolute पोजिशनिंगposition: absolute एलिमेंट को फ्लो से खींच निकालता है, इसलिए यह कोई जगह नहीं लेता है और पड़ोसी इसके पीछे बंद हो जाते हैं। यह तब अपने निकटतम पैरेंट के विरुद्ध पोजिशन करता है जिसके पास position सेट है। यही कारण है कि badge-on-a-card ट्रिक एक जोड़ी है: कार्ड पर relative, बैज पर absolute, इसलिए बैज कार्ड के कोने में उतरता है और कहीं यादृच्छिक नहीं।

JunoAbsolute पोजिशनिंग एक absolute एलिमेंट पूरी तरह से फ्लो को छोड़ देता है और अपने कंटेनिंग ब्लॉक के विरुद्ध पोजिशन करता है, निकटतम एंसेस्टर जो स्वयं पोजिशन्ड है। रोजमर्रा का पैटर्न पैरेंट पर position: relative है, जो कोई भी चीज़ को दृश्यमान नहीं करता है लेकिन संदर्भ फ्रेम बन जाता है, फिर बच्चे पर absolute। जब एक absolute एलिमेंट पेज के top-left कोने में उतरता है, इसका अर्थ है कि कोई एंसेस्टर पोजिशन्ड नहीं था और यह व्यूपोर्ट पर वापस गिरा।

JunoAbsolute पोजिशनिंग एक absolute एलिमेंट के लिए कंटेनिंग ब्लॉक इसके निकटतम non-static एंसेस्टर का पैडिंग बॉक्स है, या यदि कोई नहीं है तो व्यूपोर्ट। जाल यह है कि transform, filter, और will-change भी नज़र में कोई position के बिना एक कंटेनिंग ब्लॉक बनाते हैं, इसलिए एक बच्चा एक transformed दादा-दादी को एंकर कर सकता है जिसे आप भूल गए थे। जब ऑफसेट गलत एलिमेंट के विरुद्ध उतरते हैं, तो केवल एक लापता position के लिए नहीं बल्कि ट्री में एक stray transform के लिए स्कैन करें।

Fixed और sticky

position: fixed एलिमेंट को स्क्रीन पर ही पिन कर देता है। यह absolute की तरह फ्लो को छोड़ता है, लेकिन एंसेस्टर को एंकर करने के बजाय, यह व्यूपोर्ट को एंकर करता है, दृश्य विंडो। एक बार fixed होने के बाद, यह स्क्रीन पर एक ही जगह पर रहता है यहां तक कि जैसे-जैसे आप पेज को स्क्रॉल करते हैं। यही कारण है कि एक नेविगेशन बार या एक "back to top" बटन पूरे समय दृश्यमान रहता है।

.site-header {
  position: fixed;
  top: 0;                    /* विंडो के शीर्ष पर पिन किया गया */
  left: 0;
  right: 0;                  /* पूरी चौड़ाई में फैलाया गया */
}

position: sticky दोस्ताना मध्य जमीन है। एक sticky एलिमेंट सामान्य रूप से पेज के साथ स्क्रॉल करता है, जब तक कि यह एक threshold तक पहुंचता है जो आप सेट करते हैं, और फिर यह जगह में स्टिक करता है। एक सेक्शन हेडिंग जो अपने कंटेंट के साथ स्क्रॉल करता है और फिर स्क्रीन के शीर्ष पर रहता है, यह क्लासिक उदाहरण है।

.section-title {
  position: sticky;
  top: 0;                    /* एक बार शीर्ष किनारे तक पहुंचने पर स्टिक करता है */
}

Fixed पोजिशनिंग absolute की तरह काम करता है, सिवाय इसके कि कंटेनिंग ब्लॉक हमेशा एंसेस्टर के बजाय व्यूपोर्ट होता है। एक fixed एलिमेंट फ्लो से हटा दिया जाता है और फिर स्क्रीन पर एक निश्चित जगह पर पिन किया जाता है, इसलिए जब पेज स्क्रॉल होता है तो यह नहीं हटता। यह persistent chrome के लिए टूल है: एक top bar, एक cookie banner, एक floating action button।

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  /* इसके नीचे कंटेंट को padding-top: 64px की जरूरत है ताकि यह छिपा न रहे */
}

वह कमेंट मुख्य gotcha की ओर इशारा करता है। क्योंकि एक fixed header फ्लो से बाहर है, यह इसके नीचे कंटेंट के साथ ओवरलैप होता है, इसलिए आप आमतौर पर पेज body को मेल खाने वाले padding या margin जोड़ते हैं ताकि कंटेंट साफ हो।

Sticky पोजिशनिंग एक हाइब्रिड है: एलिमेंट relative के रूप में व्यवहार करता है जबकि यह view में है, फिर fixed-जैसे व्यवहार पर स्विच करता है एक बार जब यह threshold तक पहुंचता है जो आप top, bottom, left, या right के साथ सेट करते हैं। एक sticky एलिमेंट बिना इन threshold ऑफसेट में से किसी के कभी स्टिक नहीं करता, क्योंकि इसके पास स्टिक करने के लिए कोई लाइन नहीं है।

.section-title {
  position: sticky;
  top: 16px;                 /* एक बार शीर्ष से 16px तक पहुंचने पर रहता है */
}

fixed absolute है एक अंतर के साथ जो मायने रखता है: इसका कंटेनिंग ब्लॉक व्यूपोर्ट है, इसलिए यह स्क्रीन पर पिन है और दस्तावेज़ के साथ स्क्रॉल नहीं होता है। यह persistent UI के लिए सही है, दो चेतावनियों के साथ। यह in-flow कंटेंट को ओवरलैप करता है (body पर padding के साथ जगह रिजर्व करें), और absolute से transform-establishes-a-containing-block नियम यहां भी लागू होता है, इसलिए एक एंसेस्टर transform एक fixed एलिमेंट को उस एंसेस्टर के अंदर फंसा देगा और यह इसके साथ स्क्रॉल करेगा। एक "fixed" एलिमेंट जो रहस्य से स्क्रॉल करता है, लगभग हमेशा एक transformed एंसेस्टर के नीचे बैठता है।

Sticky पोजिशनिंग पाँचों में सबसे सशर्त है। एक sticky एलिमेंट सामान्य फ्लो में लेआउट किया जाता है, अपनी जगह रखता है, और वहां रहता है जब तक कि इसका निकटतम स्क्रॉलिंग एंसेस्टर इसे threshold तक स्क्रॉल नहीं करता है जो आपने घोषित किया है; उस बिंदु से यह threshold पर रहता है जब तक कि इसका कंटेनिंग ब्लॉक आगे स्क्रॉल न हो, उस बिंदु पर यह रिलीज होता है। दो जरूरतें जो लोग मिस करते हैं:

.toc {
  position: sticky;
  top: 24px;                 /* threshold; एक offset के बिना कभी स्टिक नहीं करता */
  /* .toc के पैरेंट के जबकि अभी भी स्क्रीन पर है तभी स्टिक करता है */
}

पहला, sticky को एक threshold ऑफसेट की जरूरत है (top, bottom, left, या right); बिना किसी के, स्टिक करने के लिए कोई लाइन नहीं है और यह एक सादे relative एलिमेंट की तरह व्यवहार करता है। दूसरा, यह केवल अपने पैरेंट की सीमा के भीतर स्टिक कर सकता है, इसलिए अगर पैरेंट छोटा है, तो एलिमेंट unstick होता है जैसे ही पैरेंट view से स्क्रॉल हो जाता है। और एक बार असफलता: एक एंसेस्टर जिसके पास overflow: hidden, scroll, या auto है, sticky एलिमेंट का स्क्रॉल कंटेनर बन जाता है, इसलिए एक sticky आइटम शांति से कुछ नहीं कर सकता क्योंकि यह एक कंटेनर तक सीमित है जो वह नहीं है जो आप स्क्रॉल करने की उम्मीद करते हैं।

JunoFixed और stickyposition: fixed एलिमेंट को स्क्रीन पर पिन करता है, इसलिए जैसे-जैसे आप स्क्रॉल करते हैं यह जगह पर रहता है, जो यह कारण है कि एक हेडर या एक back-to-top बटन चारों ओर लटका रहता है। position: sticky मध्य जमीन है: यह पेज के साथ स्क्रॉल करता है, फिर एक threshold जैसे top: 0 तक पहुंचने पर स्टिक करता है। Fixed भी जो कुछ इसके नीचे है उसके साथ ओवरलैप करता है, इसलिए कंटेंट के लिए कुछ जगह छोड़ें जिसे यह कवर करता है।

JunoFixed और stickyfixed absolute है व्यूपोर्ट को एंकर किया गया, इसलिए यह स्क्रीन पर रहता है जबकि पेज स्क्रॉल होता है, in-flow कंटेंट को ओवरलैप करने की कीमत पर जब तक आप इसके चारों ओर पैड न करें। sticky relative की तरह व्यवहार करता है जब तक कि यह अपने threshold ऑफसेट तक न पहुंचे, फिर जगह में रहता है। एक sticky एलिमेंट बिना top या bottom सेट किए कभी स्टिक नहीं करता, क्योंकि इसके स्टिक करने के लिए कोई लाइन नहीं है।

JunoFixed और stickyfixed व्यूपोर्ट को पिन करता है, लेकिन एक एंसेस्टर transform इसे उस एंसेस्टर के अंदर फंसाता है और यह स्क्रॉल करेगा, इसलिए एक स्क्रॉलिंग "fixed" एलिमेंट आमतौर पर एक transformed पैरेंट होता है। sticky को दो चीजों की जरूरत है लोग भूलते हैं: एक threshold ऑफसेट और एक काफी लंबा पैरेंट, क्योंकि यह रिलीज होता है जैसे ही इसका पैरेंट scroll off हो। और एक एंसेस्टर को देखें जिसके पास overflow सेट है, जो scroll कंटेनर बन जाता है और sticky को शांति से काम करना बंद कर सकता है।

z-index के साथ stacking

जब एलिमेंट्स ओवरलैप होते हैं, तो कुछ निर्णय लेना होता है कि कौन शीर्ष पर बैठता है। यह वही है जो z-index नियंत्रित करता है। एक उच्च z-index एक निम्न को सामने खींचता है, इसलिए z-index: 10 के साथ एक dropdown z-index: 1 के साथ एक कार्ड को कवर करता है।

एक नियम है जो सभी को हैरान करता है: z-index केवल पोजिशन्ड एलिमेंट्स पर काम करता है। यदि एलिमेंट अभी भी static है, तो इसका z-index अनदेखा किया जाता है। तो आप लगभग हमेशा एक position और एक z-index को एक साथ सेट करते हैं।

.modal {
  position: fixed;
  z-index: 100;              /* सामान्य पेज कंटेंट के ऊपर बैठता है */
}

.modal-overlay {
  position: fixed;
  z-index: 99;               /* अंधकार पृष्ठभूमि, मॉडल के एक कदम पीछे */
}

आप यहां बड़ी संख्याओं की शायद ही कभी जरूरत है। एक छोटा, साफ स्केल जैसे 1, 10, 100 एक पेज भर से 9999s के साथ सोचना आसान है जो एक दूसरे से लड़ रहे हैं।

जब दो एलिमेंट्स ओवरलैप होते हैं, z-index उनके front-to-back ऑर्डर सेट करता है: उच्च संख्याएं निम्न के ऊपर पेंट करती हैं। पकड़ यह है कि z-index केवल पोजिशन्ड एलिमेंट्स को प्रभावित करता है। एक static एलिमेंट को एक z-index दें और कुछ नहीं होता है, इसलिए z-index और position लगभग हमेशा एक साथ यात्रा करते हैं।

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.tooltip {
  position: absolute;
  z-index: 50;               /* कार्ड्स के ऊपर, मॉडल के नीचे */
}

जल्दी बनाने के लिए habit एक छोटा, इरादतन स्केल है बजाय escalating संख्याओं के। जब आप अपने आप को z-index: 9999 लिखते हुए पाते हैं कुछ को हराने के लिए, असली फिक्स आमतौर पर एक बड़ी संख्या नहीं है बल्कि आपके stacking वैल्यूज के लिए एक योजना है। अगला लेवल समझाता है कि क्यों एक बड़ी संख्या कभी-कभी खो जाती है।

z-index z-axis के साथ ओवरलैपिंग पोजिशन्ड एलिमेंट्स को ऑर्डर करता है, उच्च सामने, और static एलिमेंट्स पर अनदेखा किया जाता है। वह हिस्सा जो एक पाँच-मिनट की बग को एक घंटे में बदल देता है वह stacking context है: एक स्वयं-समाहित समूह जिसके भीतर z-index वैल्यूज की तुलना की जाती है, और जो अपने siblings के विरुद्ध एक एकल यूनिट के रूप में stack होता है।

एक stacking context तब बनता है जब एक एलिमेंट auto के अलावा कोई z-index के साथ पोजिशन होता है, लेकिन 1 से नीचे opacity से भी, किसी भी transform, filter, will-change, isolation: isolate, और कुछ अन्य से भी। महत्वपूर्ण रूप से, z-index केवल एक ही stacking context के अंदर तुलना की जाती है। एक बार एक एलिमेंट एक context के अंदर बैठता है, इसका z-index इसे उस context के बाहर कुछ भी ऊपर नहीं उठा सकता है, चाहे संख्या कितनी भी बड़ी हो।

.card {
  opacity: 0.98;             /* यह अकेले एक stacking context बनाता है */
}

.card .badge {
  position: absolute;
  z-index: 9999;             /* .card के context के अंदर फंसा हुआ */
}

.sibling-panel {
  position: relative;
  z-index: 2;                /* अभी भी .badge के ऊपर पेंट करता है */
}

यहां .badge 9999 पर .sibling-panel 2 पर हारता है, क्योंकि .badge context तक सीमित है जो .card's opacity ने बनाया, और वह पूरा context .sibling-panel के नीचे रैंक करता है। जब एक उच्च z-index जीतने से इनकार करता है, तो उत्तर लगभग कभी एक उच्च संख्या नहीं है; यह एक एंसेस्टर है जिसने चुप-चाप एक stacking context खोला (अक्सर एक opacity या एक transform), और फिक्स उस एंसेस्टर को raise या isolate करना है।

closing point पर निर्णय: पोजिशनिंग और z-index overlays, badges, और pinned chrome के लिए हैं, वह चीजें जिन्हें फ्लो से निकलने या शीर्ष पर बैठने की जरूरत है। वे एक पेज की मुख्य संरचना को अरेंज करने के लिए गलत टूल हैं। rows, columns, और grids के लिए जो अपने कंटेंट और viewport के लिए प्रतिक्रिया करना चाहिए, flexbox या box model में box-model-driven flow के लिए पहुंचें, और पोजिशनिंग को उस layer के लिए रखें जो इसके ऊपर तैरती है।

Junoz-index के साथ stacking जब एलिमेंट्स ओवरलैप होते हैं, z-index निर्णय लेता है कि कौन सामने है: एक उच्च संख्या जीतती है। यह केवल पोजिशन्ड एलिमेंट्स पर काम करता है, इसलिए एक सादे static एलिमेंट पर z-index अनदेखा किया जाता है, और आप position और z-index को एक साथ सेट करते हैं। संख्याओं को छोटा और साफ रखें, 1, 10, 100 जैसे, एक 9999s का ढेर होने के बजाय।

Junoz-index के साथ stackingz-index पोजिशन्ड एलिमेंट्स के लिए front-to-back ऑर्डर सेट करता है, और यह static वाले पर कुछ नहीं करता है, इसलिए यह position के साथ राइड करता है। एक छोटे intentional स्केल के लिए पहुंचें बजाय संख्याओं को climbing करने; यदि आप 9999 लिख रहे हैं जीतने के लिए, आपको एक योजना की जरूरत है, एक बड़ी वैल्यू नहीं। और कभी-कभी एक बड़ी वैल्यू बहुत हारती है, जो stacking contexts पर deep dive समझाता है।

Junoz-index के साथ stackingz-index केवल एक stacking context के अंदर तुलना की जाती है, और opacity below 1, transform, और filter जैसी चीजें चुप-चाप एक बनाती हैं। यही कारण है कि एक बच्चा z-index: 9999 पर अभी भी एक बाहर के एलिमेंट पर 2 पर हार सकता है: यह अपने एंसेस्टर के context में फंसा है। जब एक उच्च संख्या जीत नहीं सकती, उस एंसेस्टर को खोजें जिसने एक context खोला और उसे raise करें, और overlays के लिए पोजिशनिंग रखें पेज लेआउट के बजाय।