स्थिति

एक तत्व को स्थिति छिट्टै कन्फिगर गर्न को लागी यी संक्षिप्त उपयोगिताहरु को उपयोग गर्नुहोस्।

साझा मानहरू

द्रुत स्थिति कक्षाहरू उपलब्ध छन्, यद्यपि तिनीहरू उत्तरदायी छैनन्।

<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>

स्थिर शीर्ष

भ्यूपोर्टको माथिल्लो भागमा, किनारादेखि किनारासम्म एउटा तत्व राख्नुहोस्। निश्चित हुनुहोस् कि तपाइँ तपाइँको परियोजना मा निश्चित स्थिति को प्रभाव बुझ्नुहुन्छ; तपाईंले अतिरिक्त CSS थप्नु पर्ने हुन सक्छ।

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

स्थिर तल

भ्यूपोर्टको फेदमा एउटा तत्वलाई छेउदेखि किनारासम्म राख्नुहोस्। निश्चित हुनुहोस् कि तपाइँ तपाइँको परियोजना मा निश्चित स्थिति को प्रभाव बुझ्नुहुन्छ; तपाईंले अतिरिक्त CSS थप्नु पर्ने हुन सक्छ।

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

टाँसिने शीर्ष

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

IE11 र IE10 को position: stickyरूपमा रेन्डर हुनेछ position: relative। यसरी, हामी शैलीहरूलाई @supportsक्वेरीमा र्‍याप गर्छौं, चिपचिपाहटलाई केवल ब्राउजरहरूमा सीमित गर्दै जसले यसलाई ठीकसँग प्रस्तुत गर्न सक्छ।

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