CSS Z-index
Position पाठ ने बॉक्स को जगह दी। z-index अगला सवाल जवाब देता है: जब दो बॉक्स ओवरलैप हों, कौन पाठक के करीब बैठता है? डेस्क पर कागज़ की चादरें सोचें — ऊपरी चादर निचली को ढकती है। विशाल नंबर गढ़ने से पहले रोज़मर्रा के नियम सीखें।
एक z-index टूलकिट
📊 Z-index एक नज़र में
| विचार | रोज़ का काम |
|---|---|
z-index |
एक ही stacking context में ओवरलैपिंग siblings का पेंट क्रम तय करता है |
| पहले पोज़िशन्ड | अक्सर static के अलावा position चाहिए (या कुछ आधुनिक लेआउट चिल्ड्रन) |
| ऊँचा जीतता है | बड़े पूर्णांक बाद में पेंट होते हैं — ऊपर दिखते हैं |
auto |
डिफ़ॉल्ट — दस्तावेज़ क्रम और पैरेंट context नियमों का पालन |
| Stacking context | एक «पिंजरा» — बच्चे आपस में तुलना करते हैं, पूरी पेज से नहीं |
| शांत स्केल | छोटे कदम (1, 2, 10) और नामित भूमिकाएँ; 9999 दौड़ नहीं |
z-index बॉक्स को बाएँ-दाएँ नहीं खिसकाता। जब बॉक्स पहले से एक ही स्क्रीन जगह साझा करते हैं, तब ही बताता है कौन किसे ढकता है।
बैज को कार्ड के ऊपर उठाएँ
कार्ड को पोज़िशन्ड घर दें, फिर बैज को मामूली z-index से ऊपर उठाएँ। Sibling क्रम अकेले काम कर सकता है, पर स्पष्ट लेयर इरादा पढ़ने योग्य बनाती है।
.card {
position: relative;
}
.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}
पेज के ऊपर ओवरले
मोडल और ड्रॉअर आमतौर पर सामान्य सामग्री के ऊपर बैठते हैं। पोज़िशन्ड ओवरले को स्पष्ट लेयर नंबर से जोड़ें — और पेज सामग्री को जानबूझकर नीचे रखें।
.page {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
siblings की तुलना करें, पूरी दुनिया की नहीं
एक context में siblings के बीच ऊँचा z-index जीतता है। मान बराबर हों तो बाद वाले DOM siblings आमतौर पर ऊपर पेंट होते हैं। पेज-व्यापी जंग से पहले एक पैरेंट के अंदर तुलना शुरू करें।
.stack {
position: relative;
}
.stack .card-a {
position: absolute;
z-index: 1;
}
.stack .card-b {
position: absolute;
z-index: 2;
}
Stacking contexts बच्चे को पिंजरे में रखते हैं
अपने stacking context वाला पैरेंट (जैसे पोज़िशन्ड + z-index) बच्चों को फँसा सकता है। z-index: 999 वाला बच्चा उस पैरेंट के बाहर के sibling से ऊपर नहीं कूदता अगर पैरेंट खुद नीचे हो। पैरेंट लेयर ठीक करें — सिर्फ बच्चे को न फुलाएँ।
.panel {
position: relative;
z-index: 1;
}
.panel .popup {
position: absolute;
z-index: 999;
}
.toast {
position: fixed;
z-index: 5;
}
एक शांत z-index आदत
भूमिकाएँ नाम दें (--layer-badge, --layer-modal) या छोटी स्केल उपयोग करें। डिबगिंग को छोड़ 99999 से बचें। याद रखें: प्लेसमेंट position है; लेयरिंग z-index है; float क्लियरिंग अगले पाठों में आएगी।
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}
.badge {
position: absolute;
z-index: var(--layer-badge);
}
.modal {
position: fixed;
z-index: var(--layer-modal);
}
खुद आज़माएँ
- Relative कार्ड पर absolute बैज रखें और
z-index: 2सेट करें। - पेज सामग्री
1पर, fixed backdrop/modalz-index: 10बनाएँ। - दो ओवरलैपिंग absolute siblings को अलग z-index दें और अदला-बदली करें।
- ऊँचे z-index वाले बच्चे को निचले z-index पैरेंट में नेस्ट करें — पिंजरा देखें।
- एक «9999» को नामित custom property स्केल में फिर लिखें।
आम गलतियाँ
- सादे
staticबॉक्स परz-indexसे सब कुछ फिर से क्रमबद्ध होने की उम्मीद - सिर्फ नेस्टेड बच्चे को उठाकर stacking contexts से लड़ना
- पढ़ने योग्य स्केल के बजाय
99999की दौड़ - इस पाठ को Position (प्लेसमेंट) या Display (बॉक्स प्रकार) जैसा मानना
- लेआउट टूल्स की जगह पेज कॉलम गढ़ने के लिए z-index
सारांश
- ओवरलैप पर
z-indexतय करता है कौन ऊपर पेंट हो - आमतौर पर non-static position चाहिए (या विशेष लेआउट केस)
- एक ही stacking context में ऊँचे मान जीतते हैं
- पैरेंट contexts बच्चों को पिंजरे में रख सकते हैं — सही स्तर ठीक करें
- छोटी नामित स्केल चुनें; float आने वाले पाठों के लिए छोड़ें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी