સંપૂર્ણ વિરુદ્ધ સંબંધિત - સીએસએસ પોઝિશનિંગ સમજાવીને

સીએસએસ પોઝીશનીંગ ફક્ત એક્સ, વાય કોઓર્ડિનેટ્સ કરતાં વધુ છે

સીએસએસ પૉઝીંગિંગ લાંબા સમયથી વેબસાઇટ લેઆઉટ બનાવવાનો એક મહત્વપૂર્ણ ભાગ છે. ફલેક્સબોક્સ અને CSS ગ્રીડ જેવી નવી સીએસએસ લેઆઉટ તકનીકોના ઉદભવ સાથે પણ, કોઈપણ વેબ ડીઝાઈનર યુક્તિઓના બેગમાં સ્થિતિ હજુ પણ મહત્વનું સ્થાન ધરાવે છે.

સીએસએસ પૉઝીંગિંગનો ઉપયોગ કરતી વખતે, તમારે જે વસ્તુ બનાવવાની જરૂર છે તે બ્રાઉઝરને જણાવવા માટે પોઝિશન માટે CSS પ્રોપર્ટીની સ્થાપના કરે છે જો તમે આપેલ તત્વ માટે ચોક્કસ અથવા સંબંધિત સ્થિતિનો ઉપયોગ કરવા જઈ રહ્યા છો. તમારે આ બે પૉઝીસીંગ પ્રોપર્ટીઝ વચ્ચેનો તફાવત સ્પષ્ટપણે સમજવાની જરૂર છે.

જ્યારે નિરપેક્ષ અને સંબંધિત બે CSS પોઝિશન ગુણધર્મો છે જે વેબ ડિઝાઇનમાં વારંવાર ઉપયોગમાં લેવાય છે, વાસ્તવમાં સ્થાનની મિલકતમાં ચાર રાજ્યો છે:

• સ્થિર
• નિરપેક્ષ
• સંબંધિત
• નિશ્ચિત

વેબ પૃષ્ઠ પર કોઈપણ ઘટક માટે સ્થિર સ્થાન મૂળભૂત છે. જો તમે તત્વની સ્થિતિ વ્યાખ્યાયિત ન કરો તો તે સ્થિર રહેશે. આનો અર્થ એ થાય કે તે સ્ક્રીન પર પ્રદર્શિત કરશે જ્યાં તે HTML દસ્તાવેજમાં છે અને તે તે દસ્તાવેજના સામાન્ય પ્રવાહમાં કેવી રીતે દર્શાવશે.

જો તમે પેઝીંગિંગ નિયમો જેમ કે ટોચના અથવા ડાબે એક એલિમેન્ટ પર લાગુ કરો કે જેની પાસે સ્થિર સ્થિતિ છે, તો તે નિયમો અવગણવામાં આવશે અને તે ઘટક રહેશે જ્યાં તે સામાન્ય દસ્તાવેજ ફ્લોમાં દેખાય છે. સત્યમાં, તમે ભાગ્યે જ, જો ક્યારેય નહીં, તો CSS માં સ્થિર સ્થિતિમાં એક ઘટક સેટ કરવાની જરૂર છે કારણ કે તે મૂળભૂત મૂલ્ય છે.

સંપૂર્ણ CSS પોઝિશનિંગ

સંપૂર્ણ સ્થિતિ કદાચ સમજવા માટે સૌથી સરળ સીએસએસ સ્થિતિ છે. તમે આ CSS પોઝિશનની મિલકત સાથે પ્રારંભ કરો છો:

સ્થિતિ: નિરપેક્ષ;

આ મૂલ્ય બ્રાઉઝરને કહે છે કે જે કંઈ પણ કરવા જઈ રહ્યું છે તે દસ્તાવેજનાં સામાન્ય પ્રવાહમાંથી દૂર કરવા જોઇએ અને તેને બદલે પૃષ્ઠ પર ચોક્કસ સ્થાન પર મૂકવામાં આવશે. આ તત્વના નજીકના બિન-સ્થિર સ્થિતિવાળી પૂર્વજની આધારે ગણતરી કરવામાં આવે છે.

કારણ કે સંપૂર્ણપણે સ્થિત થયેલ તત્વ દસ્તાવેજના સામાન્ય પ્રવાહમાંથી લેવામાં આવે છે, તે HTML પૃષ્ઠમાં તે પહેલાં અથવા તેના પછીના તત્વો વેબ પૃષ્ઠ પર કેવી રીતે સ્થિત છે તે અસર કરશે નહીં.

એક ઉદાહરણ તરીકે - જો તમારી પાસે એક વિભાગીય છે જે સંબંધિત ના મૂલ્યનો ઉપયોગ કરીને સ્થાનાંતરિત કરવામાં આવ્યો છે (અમે ટૂંક સમયમાં આ મૂલ્યને જોશું), અને તે વિભાગમાં તમારી પાસે ફકરો છે કે તમે વિભાગના ટોચથી 50 પિક્સેલ્સને સ્થાન આપવા ઇચ્છતા હો, તો તમે તે "ટોચ" પ્રોપર્ટી પર 50 પીએક્સના ઓફસેટ મૂલ્ય સાથે, તે ફકરામાં "નિરપેક્ષ" ની સ્થિતિ મૂલ્ય ઉમેરશે.

સ્થિતિ: નિરપેક્ષ; ટોચ: 50px;

આ સંપૂર્ણપણે સ્થિત થયેલ ઘટક તે પ્રમાણમાં સ્થાનાંતરણ વિભાગની ટોચ પરથી હંમેશા 50 પિક્સેલ્સ દર્શાવશે - સામાન્ય પ્રવાહમાં બીજું શું ત્યાં પ્રદર્શિત કરે છે. તમારા "સંપૂર્ણપણે" સ્થાને થયેલ ઘટક એ તેના સંદર્ભમાં પ્રમાણમાં સ્થિત થયેલ એકનો ઉપયોગ કરે છે અને તમે જે ઉપયોગ કરો છો તે સકારાત્મક છે.

તમે ઉપયોગ કરવા માટે ઉપલબ્ધ છે તે ચાર સ્થિતિ ગુણધર્મો છે:

• ટોચ
• અધિકાર
• નીચે
• બાકી

તમે ક્યાં તો ટોચ અથવા તળિયાનો ઉપયોગ કરી શકો છો (કારણ કે આ બંને મૂલ્યો પ્રમાણે એક તત્વ સ્થાનાંતરિત કરી શકાતું નથી) અને ક્યાં તો જમણે અથવા ડાબે.

જો એક તત્વ નિશ્ચિત સ્થાન પર સેટ કરેલું હોય, પરંતુ ત્યાં તે કોઈ બિન-સ્થિર રીતે સ્થાનિત પૂર્વજો નથી, તો તે શરીર ઘટકથી સંબંધિત છે, જે પૃષ્ઠનો ઉચ્ચતમ સ્તરનો ઘટક છે.

સંબંધી સ્થિતિ

અમે પહેલેથી જ સંબંધિત પદવી આપેલું સૂચવ્યું છે, તો ચાલો આપણે તે મિલકતને હવે જોઈએ.

સંબંધિત પૉઝીસીંગિંગ એ જ સ્થિતિની સંપૂર્ણ સ્થિતિને સંપૂર્ણ સ્થિતિ તરીકે ઉપયોગ કરે છે, પરંતુ તેના નજીકના બિન-સ્ટેટિકલી સ્થિતિવાળા પૂર્વજ પર તત્વની સ્થિતિને આધાર આપવાને બદલે, જ્યાં તે હજી સામાન્ય પ્રવાહમાં હોય ત્યાંથી તત્વની શરૂઆત થાય છે.

ઉદાહરણ તરીકે, જો તમારી પાસે તમારા વેબ પેજ પર ત્રણ ફકરા હોય અને ત્રીજામાં "પોઝિશન: સંબંધિત" શૈલી હોય, તો તે પોઝિશન તેના વર્તમાન સ્થાનના આધારે ઓફસેટ થઈ જશે.

ફકરો 1.

ફકરો 2.

ફકરો 3.

ઉપરોક્ત ઉદાહરણમાં, ત્રીજા ફકરોને કન્ટેનર તત્વની ડાબી બાજુથી 2em પર ગોઠવવામાં આવશે, પરંતુ તે હજુ પણ પ્રથમ બે ફકરો નીચે હશે. તે દસ્તાવેજના સામાન્ય પ્રવાહમાં રહેશે, અને સહેજ ઓફસેટ થઈ જશે. જો તમે તેને પોઝિશનમાં બદલ્યો છે: નિરપેક્ષ; તેની નીચેના કોઈ પણ વસ્તુ તેને ટોચ પર દેખાશે, કારણ કે તે દસ્તાવેજના સામાન્ય પ્રવાહમાં રહેશે નહીં.

કોઈ વેબ પેજ પરનાં ઘટકોનો ઉપયોગ પોઝિશનની કિંમત નક્કી કરવા માટે થાય છે: કોઈ ઓફસેટ વેલ્યુ સાથે સંબંધિત નથી, જેનો મતલબ એવો થાય છે કે તે ઘટક બરાબર છે જ્યાં તે સામાન્ય પ્રવાહમાં દેખાશે. આ ફક્ત તે તત્વને એક સંદર્ભ તરીકે સ્થાપિત કરવા માટે કરવામાં આવે છે જેની સામે અન્ય તત્વો સંપૂર્ણપણે સ્થિત થઈ શકે છે. દાખલા તરીકે, જો તમારી પાસે સમગ્ર વેબસાઇટને "કન્ટેનર" (જે વેબ ડીઝાઇનમાં એક ખૂબ જ સામાન્ય દૃશ્ય છે) ની ક્લાસ વેલ્યુ સાથેની ફરતી હોય, તો તે ડિવિઝન સાપેક્ષની સ્થિતિ પર સેટ કરી શકાય છે, જેથી તેની અંદરનો કોઈ પણ ઉપયોગ કરી શકે તે સ્થિતિ સંદર્ભ તરીકે.

સ્થિર સ્થિતિ વિશે શું?

સ્થિર સ્થિતિ ચોક્કસ સ્થિતિ જેવી છે. તત્વની સ્થિતી ગણતરી કરવામાં આવે છે તે જ રીતે સંપૂર્ણ મોડેલ તરીકે ગણવામાં આવે છે, પરંતુ નિશ્ચિત તત્વો પછી તે સ્થાનાંતરિત થાય છે- લગભગ એક વોટરમાર્કની જેમ. પૃષ્ઠ પર બાકીનું બધું તે પછી તે ઘટકને સ્ક્રોલ કરશે.

આ સંપત્તિ મૂલ્યનો ઉપયોગ કરવા માટે, તમે સેટ કરશો:

સ્થિતિ: નિશ્ચિત;

ધ્યાનમાં રાખો, જ્યારે તમે તમારી સાઇટ પર એક તત્વ નક્કી કરો છો, ત્યારે તે સ્થાનમાં છાપશે જ્યારે તમારું વેબ પૃષ્ઠ છપાયેલું હશે. ઉદાહરણ તરીકે, જો તમારું તત્વ તમારા પૃષ્ઠની ટોચ પર નિર્ધારિત છે, તો તે દરેક પ્રિન્ટેડ પૃષ્ઠની ટોચ પર દેખાશે - કારણ કે તે પૃષ્ઠની ટોચ પર નિર્ધારિત છે મુદ્રિત પૃષ્ઠો નિશ્ચિત ઘટકો કેવી રીતે પ્રદર્શિત કરે છે તે બદલવા માટે તમે મીડિયા પ્રકારનો ઉપયોગ કરી શકો છો:

@ મીડિયા સ્ક્રીન {h1 # પહેલા {સ્થિતિ: નિશ્ચિત; }} @ મીડિયા પ્રિન્ટ {h1 # પહેલા {સ્થિતિ: સ્થિર; }}

જેનિફર કિનાન દ્વારા મૂળ લેખ. 1/7/16 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત