કેસ્કેડીંગ સ્ટાઇલ શીટ્સ સાથે ઓવરલેપ થતી તત્વો
વેબ પૃષ્ઠ લેઆઉટ માટે CSS પૉઝીસીંગનો ઉપયોગ કરતી વખતે પડકારોમાંથી એક એ છે કે તમારા કેટલાક ઘટકો અન્ય લોકોનું ઓવરલેપ કરી શકે છે. જો તમે HTML માં છેલ્લા ઘટકને ટોચ પર રાખવા માંગો છો, તો પણ તે સારું કામ કરે છે, પરંતુ જો તમે નથી અથવા તો શું જો તમે એવા ઘટકો ધરાવવા માંગતા હો કે જે હાલમાં અન્ય લોકોને આવું કરવા માટે ઓવરલેપ કરતા નથી કારણ કે આ "સ્તરવાળી" દેખાવ માટે ડિઝાઇનની જરૂર છે ? તત્વોને ઓવરલેપ કરવાની રીત બદલવા માટે તમારે સીએસએસની પ્રોપર્ટીનો ઉપયોગ કરવાની જરૂર છે.
જો તમે વર્ડ અને પાવરપોઈન્ટ અથવા એડોબ ફોટોશોપ જેવા વધુ મજબૂત ઇમેજ એડિટરમાં ગ્રાફિક્સ ટૂલ્સનો ઉપયોગ કર્યો હોય, તો પછી તમે ઝેડ-ઇન્ડેક્સ જેવી ક્રિયાને ક્રિયામાં જોઈ છે. આ પ્રોગ્રામ્સમાં, તમે દોરવામાં આવેલા ઑબ્જેક્ટ (ઓ) પ્રકાશિત કરી શકો છો, અને તમારા દસ્તાવેજના અમુક ઘટકોના "આગળ મોકલો" અથવા "આગળ લાવો" વિકલ્પ પસંદ કરો. ફોટોશોપમાં, તમારી પાસે આ વિધેયો નથી, પરંતુ તમારી પાસે "લેયર" કાર્યક્રમનો ફલક છે અને તમે ગોઠવી શકો છો કે જ્યાં આ સ્તરોનું પુન: ગોઠવણી કરીને એક તત્વ કેનવાસમાં આવે છે. આ બન્ને ઉદાહરણોમાં, તમે આવશ્યકપણે તે ઑબ્જેક્ટ્સનો ઝેડ-ઇન્ડેક્સ સેટ કરી રહ્યા છો.
Z- ઇન્ડેક્સ શું છે?
જ્યારે તમે પૃષ્ઠ પરના ઘટકોને સ્થાન આપવા માટે CSS પૉઝીંગિંગનો ઉપયોગ કરી રહ્યાં છો, ત્યારે તમારે ત્રણ પરિમાણમાં વિચારવું જરૂરી છે. ત્યાં બે પ્રમાણભૂત પરિમાણો છે: ડાબી / જમણી અને ઉપર / નીચે ડાબેથી જમણી અનુક્રમણિકાને x- ઇન્ડેક્સ તરીકે ઓળખવામાં આવે છે, જ્યારે ટોચની નીચેથી y- ઇન્ડેક્સ છે. આ રીતે તમે આ બે અનુક્રમણિકાઓનો ઉપયોગ કરીને આડા અથવા ઊભી તત્વોને પદવી રાખશો.
જ્યારે વેબ ડિઝાઇન પર આવે છે, ત્યારે પૃષ્ઠના સ્ટેકીંગ હુકમ પણ છે. પૃષ્ઠ પરની દરેક ઘટક કોઈપણ અન્ય ઘટક ઉપર અથવા નીચે સ્તરવાળી હોઇ શકે છે. Z- ઇન્ડેક્સ પ્રોપર્ટી તે નક્કી કરે છે કે સ્ટેકમાં દરેક એલિમેન્ટ ક્યાં છે. જો X- અનુક્રમણિકા અને y- ઇન્ડેક્સ હોરીઝોન્ટલ અને વર્ટિકલ લીટીઓ છે, તો Z- ઇન્ડેક્સ એ પૃષ્ઠની ઊંડાઈ છે, અનિવાર્યપણે 3 જી પરિમાણ.
હું કાગળના ટુકડા તરીકે વેબપૃષ્ઠ પરના ઘટકો અને વેબપેજને કોલાજ તરીકે ધ્યાનમાં લેવાનું પસંદ કરું છું. જ્યાં હું મૂકે છું તે પેજિંગ દ્વારા નક્કી કરવામાં આવે છે, અને તેમાંથી કેટલા અન્ય ઘટકો દ્વારા આવરી લેવામાં આવે છે તે ઝેડ-ઇન્ડેક્સ છે.
Z- ઇન્ડેક્સ એ એક નંબર છે, ક્યાંતો સકારાત્મક (દા.ત. 100) અથવા નકારાત્મક (દા.ત -100). મૂળભૂત z- ઇન્ડેક્સ 0 છે. સૌથી વધુ ઝેડ-ઇન્ડેક્સ ધરાવતો તત્વ ટોચ પર છે, ત્યારબાદ આગામી ઉચ્ચતમ અને તેથી નીચલા Z- ઇન્ડેક્સ નીચે. જો બે ઘટકો સમાન ઝેડ-ઇન્ડેક્સ મૂલ્ય ધરાવે છે (અથવા તે વ્યાખ્યાયિત નથી, જેનો અર્થ થાય છે કે તેનો ઉપયોગ 0 ની મૂળભૂત કિંમત છે) તો બ્રાઉઝર તેમને HTML માં દેખાતા ક્રમમાં મૂકે છે.
કેવી રીતે Z- ઇન્ડેક્સનો ઉપયોગ કરવો
દરેક તત્વને તમે તમારા સ્ટેકમાં અલગ ઝેડ ઇન્ડેક્સ વેલ્યુ આપો છો. ઉદાહરણ તરીકે, જો મારી પાસે પાંચ અલગ અલગ તત્વો છે:
- તત્વ 1 - ઝેડ-ઈન્ડેક્સ -25
- તત્વ 2 - ઝેડ ઇન્ડેક્સ 82
- તત્વ 3 - Z- ઇન્ડેક્સ સેટ નથી
- તત્વ 4 - ઝેડ-ઇન્ડેક્સ 10
- તત્વ 5 - -3 નું ઝેડ ઇન્ડેક્સ
તેઓ નીચેના ક્રમમાં સ્ટેક કરશે:
- તત્વ 2
- તત્વ 4
- તત્વ 3
- તત્વ 5
- તત્વ 1
હું તમારા ઘટકોને ગંઠાવા માટે અત્યંત અલગ ઝેડ ઇન્ડેક્સ મૂલ્યોનો ઉપયોગ કરવાની ભલામણ કરું છું. આ રીતે, જો તમે પછીથી પૃષ્ઠ પર વધુ ઘટકો ઍડ કરો છો, તો તમારી પાસે અન્ય તમામ ઘટકોના z- ઇન્ડેક્સ મૂલ્યોને વ્યવસ્થિત કર્યા વગર તેમને સ્તર આપવા માટે જગ્યા છે દાખ્લા તરીકે:
- મારા ટોચના-સૌથી તત્વ માટે 100
- મારા મધ્યમ તત્વ માટે 0
- મારા તળિયે તત્વ માટે -100
તમે બે તત્વોને સમાન ઝેડ-ઈન્ડેક્સ વેલ્યુ પણ આપી શકો છો. જો આ ઘટકો સ્ટૅક્ડ છે, તો તે હરોળમાં છેલ્લા એલિમેન્ટ સાથે એચટીએમએલમાં લખેલા ક્રમમાં પ્રદર્શિત કરશે.
એક નોંધ, તત્વને અસરકારક રીતે z- ઇન્ડેક્સ ગુણધર્મનો ઉપયોગ કરવા માટે, તે બ્લોક સ્તરનું ઘટક હોવું જોઈએ અથવા તમારી સીએસએસ ફાઇલમાં "બ્લોક" અથવા "ઇનલાઇન-બ્લોક" ના પ્રદર્શનનો ઉપયોગ કરવો જોઈએ.
જેનિફર કિનાન દ્વારા મૂળ લેખ. જેરેમી ગીરર્ડ દ્વારા 12/09/16 ના રોજ સંપાદિત.