स्थान

किसी तत्व की स्थिति को शीघ्रता से कॉन्फ़िगर करने के लिए इन शॉर्टहैंड उपयोगिताओं का उपयोग करें।

सामान्य मूल्य

त्वरित स्थिति निर्धारण कक्षाएं उपलब्ध हैं, हालांकि वे उत्तरदायी नहीं हैं।

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

फिक्स्ड टॉप

किसी तत्व को व्यूपोर्ट के शीर्ष पर, किनारे से किनारे तक रखें। सुनिश्चित करें कि आप अपनी परियोजना में निश्चित स्थिति के प्रभाव को समझते हैं; आपको अतिरिक्त सीएसएस जोड़ने की आवश्यकता हो सकती है।

<div class="fixed-top">...</div>

निश्चित तल

व्यूपोर्ट के निचले भाग में किनारे से किनारे तक किसी तत्व को रखें। सुनिश्चित करें कि आप अपनी परियोजना में निश्चित स्थिति के प्रभाव को समझते हैं; आपको अतिरिक्त सीएसएस जोड़ने की आवश्यकता हो सकती है।

<div class="fixed-bottom">...</div>

चिपचिपा शीर्ष

किसी तत्व को व्यूपोर्ट के शीर्ष पर, किनारे से किनारे तक, लेकिन केवल उसके बाद स्क्रॉल करने के बाद रखें। .sticky-topउपयोगिता CSS का उपयोग करती है , position: stickyजो सभी ब्राउज़रों में पूरी तरह से समर्थित नहीं है।

position: stickyIE11 और IE10 position: relative. जैसे, हम शैलियों को एक @supportsक्वेरी में लपेटते हैं, चिपचिपाहट को केवल उन ब्राउज़रों तक सीमित करते हैं जो इसे ठीक से प्रस्तुत कर सकते हैं।

<div class="sticky-top">...</div>