પદ

તત્વની સ્થિતિને ઝડપથી ગોઠવવા માટે આ શોર્ટહેન્ડ ઉપયોગિતાઓનો ઉપયોગ કરો.

સામાન્ય મૂલ્યો

ક્વિક પોઝિશનિંગ ક્લાસ ઉપલબ્ધ છે, જો કે તે રિસ્પોન્સિવ નથી.

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