position નિયંત્રણ કરે છે કે તત્વ કેવી રીતે મૂકવામાં આવે છે અને તે ઓફસેટ ગુણધર્મો (top/right/bottom/left) લાગુ થાય છે કે કેમ.
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute એક તત્વને તેના નજીકના સ્થિતિવાળા પૂર્વજ (કંઈ પણ બીજું static નહીં) ને સંબંધમાં મૂકે છે. તેથી તમે તેને સંદર્ભ બિંદુ બનાવવા માટે પેરેન્ટ પર position: relative સેટ કરો છો:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
યો relative-parent / absolute-child પેટર્ન સર્વત્ર છે: બેજ, ડ્રોપડાઉન, ટૂલટિપ્સ, બંધ બટન.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0) તક પહોંચે, પછી ત્યાં રહે છે જ્યારે તેનું કન્ટેનર દૃષ્ટિમાં છે — વિભાગ હેડર્સ માટે શ્રેષ્ઠ.absolute/fixed તત્વો સામાન્ય પ્રવાહમાંથી દૂર કરવામાં આવે છે, તેથી તેઓ જગ્યા આરક્ષણ કરતા નથી — ભાઈબહેનો એવું કાર્ય કરે છે કે તેઓ ત્યાં નથી, જે ઓવરલેપ કરી શકે છે. આ માટે યોજના બનાવો (દાહરણ તરીકે, fixed navbar ને વળતર આપવા માટે padding ઉમેરો).
position ઓવરલે, sticky headers, modals, ડ્રોપડાઉન અને બેજ માટે આવશ્યક છે.
Relative-parent/absolute-child સંબંધ અને fixed-vs-sticky તફાવત એ વ્યવહારિક મૂલ્ય છે જે તમે સતત ઉપયોગ કરો છો.