पोज़िशनिंग: relative, absolute, fixed, sticky, z-index

CSS पोज़िशन और अच्छी तरह प्रबंधित z-index स्केल के साथ बैज, हेडर और मोडल को ठीक वहीं टिकाएँ जहाँ आप चाहते हैं।

8 मिनट · 3 प्रश्न

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

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed किसी एलिमेंट को स्क्रॉल की परवाह किए बिना viewport से पिन कर देता है: कुकी बैनर, बैक-टू-टॉप बटन। position: sticky एक हाइब्रिड है: एलिमेंट पेज के साथ सामान्य रूप से स्क्रॉल होता है, फिर आपके परिभाषित थ्रेशोल्ड (उदाहरण के लिए top: 0) तक पहुँचते ही अपनी जगह पर लॉक हो जाता है। यह उन हेडर्स के लिए आधुनिक समाधान है जो दिखते रहते हैं।

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

जब एलिमेंट्स एक-दूसरे पर ओवरलैप होते हैं, तो z-index तय करता है कि कौन सा सबसे ऊपर बैठेगा - लेकिन केवल पोज़िशन किए गए एलिमेंट्स के लिए। यादृच्छिक मानों के बजाय एक दस्तावेज़ीकृत स्केल अपनाएँ: ड्रॉपडाउन मेन्यू के लिए 10, हेडर के लिए 100, मोडल के लिए 1000। सावधान रहें: एक पैरेंट जो अपना खुद का स्टैकिंग कॉन्टेक्स्ट बनाता है (उदाहरण के लिए 1 से कम opacity के साथ) अपने सभी चाइल्ड्स के z-index को सीमित कर देता है।

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

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

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. एक position: absolute एलिमेंट खुद को किसके सापेक्ष रखता है?
   • हमेशा ब्राउज़र विंडो के सापेक्ष
   • निकटतम पोज़िशन किए गए पूर्वज के सापेक्ष, वरना viewport के
   • अपने प्रत्यक्ष पैरेंट के सापेक्ष, चाहे उसकी पोज़िशन कुछ भी हो
2. fixed और sticky में क्या अंतर है?
   • fixed हमेशा स्क्रीन से पिन रहता है, sticky केवल एक स्क्रॉल थ्रेशोल्ड से आगे अपनी जगह पर लॉक होता है
   • sticky, fixed की तुलना में तेज़ी से रेंडर होता है
   • कोई नहीं, वे पर्यायवाची हैं
3. z-index: 999 का कोई असर क्यों नहीं हो सकता?
   • क्योंकि अधिकतम अनुमत मान 100 है
   • क्योंकि एलिमेंट पोज़िशन किया हुआ नहीं है, या किसी निचले स्टैकिंग कॉन्टेक्स्ट में फँसा है
   • क्योंकि z-index केवल Grid के साथ काम करता है