પદ
તત્વની સ્થિતિને ઝડપથી ગોઠવવા માટે આ શોર્ટહેન્ડ ઉપયોગિતાઓનો ઉપયોગ કરો.
સામાન્ય મૂલ્યો
ક્વિક પોઝિશનિંગ ક્લાસ ઉપલબ્ધ છે, જો કે તે રિસ્પોન્સિવ નથી.
<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>