Source

स्थितिः

तत्त्वस्य स्थितिं शीघ्रं विन्यस्तुं एतानि आशुलिपि-उपयोगितायाः उपयोगं कुर्वन्तु ।

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

द्रुतस्थापनवर्गाः उपलभ्यन्ते, यद्यपि ते प्रतिक्रियाशीलाः न सन्ति।

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

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

viewport इत्यस्य उपरि, edge तः edge यावत्, एकं element स्थापयन्तु, परन्तु केवलं भवन्तः तत् scroll कृत्वा एव । .sticky-topउपयोगिता CSS's इत्यस्य उपयोगं करोति , position: stickyयत् सर्वेषु ब्राउजर्-मध्ये पूर्णतया समर्थितं नास्ति ।

IE11 तथा IE10 position: stickyइत्यनेन position: relative. तथा च, वयं शैल्याः एकस्मिन् @supportsप्रश्ने वेष्टयामः, चिपचिपाहटं केवलं ब्राउजर् मध्ये एव सीमितं कुर्मः ये तत् सम्यक् रेण्डर् कर्तुं शक्नुवन्ति ।

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