શું તમે ક્યારેય તમારા CSS માં એક એલિમેન્ટ પર z-index: 99999 સેટ કર્યું છે, અને તે અન્ય ઘટકોની ટોચ પર આવતું નથી? એક મૂલ્ય કે જે મોટા હોય તેણે તે તત્વને અન્ય કોઈપણ વસ્તુની ટોચ પર સરળતાથી મૂકવું જોઈએ, એમ ધારીને કે તમામ વિવિધ ઘટકો કાં તો ઓછા મૂલ્ય પર સેટ છે અથવા બિલકુલ સેટ નથી. વેબપેજ સામાન્ય રીતે દ્વિ-પરિમાણીય જગ્યામાં રજૂ થાય છે; જો કે, ચોક્કસ CSS ગુણધર્મો લાગુ કરીને, ઊંડાણને અભિવ્યક્ત કરવા માટે એક કાલ્પનિક z-axis પ્લેન રજૂ કરવામાં આવે છે. આ પ્લેન સ્ક્રીન પર લંબરૂપ છે, અને તેમાંથી, વપરાશકર્તા તત્વોના ક્રમને સમજે છે, એક બીજાની ઉપર. કાલ્પનિક z-અક્ષ પાછળનો વિચાર, સ્ટેક કરેલા તત્વો વિશે વપરાશકર્તાની ધારણા, એ છે કે CSS ગુણધર્મો કે જે તેને બનાવે છે તે રચના કરવા માટે ભેગા થાય છે જેને આપણે સ્ટેકીંગ સંદર્ભ કહીએ છીએ. અમે વેબપેજ પર તત્વો કેવી રીતે "સ્ટૅક" કરવામાં આવે છે, સ્ટેકીંગ ઓર્ડરને શું નિયંત્રિત કરે છે અને જ્યારે જરૂર પડે ત્યારે તત્વોને "અનસ્ટેક" કરવા માટે વ્યવહારુ અભિગમો વિશે વાત કરવા જઈ રહ્યા છીએ. સ્ટેકીંગ સંદર્ભો વિશે તમારા વેબપેજને ડેસ્ક તરીકે કલ્પના કરો. જેમ જેમ તમે HTML ઘટકો ઉમેરો છો, તેમ તમે ડેસ્ક પર એક પછી એક કાગળના ટુકડાઓ મૂકી રહ્યા છો. મૂકવામાં આવેલો કાગળનો છેલ્લો ટુકડો સૌથી તાજેતરમાં ઉમેરવામાં આવેલ HTML તત્વની સમકક્ષ છે, અને તે તેની આગળ મૂકવામાં આવેલા અન્ય તમામ કાગળોની ટોચ પર બેસે છે. આ સામાન્ય દસ્તાવેજ પ્રવાહ છે, નેસ્ટેડ તત્વો માટે પણ. ડેસ્ક પોતે જ રુટ સ્ટેકીંગ સંદર્ભને રજૂ કરે છે, જે તત્વ દ્વારા રચાય છે, જેમાં અન્ય તમામ ફોલ્ડર્સ હોય છે. હવે, ચોક્કસ CSS ગુણધર્મો અમલમાં આવે છે. પોઝીશન (z-ઇન્ડેક્સ સાથે), ઓપેસીટી, ટ્રાન્સફોર્મ અને સમાવિષ્ટ) જેવા પ્રોપર્ટીઝ ફોલ્ડરની જેમ કાર્ય કરે છે. આ ફોલ્ડર એક તત્વ અને તેના તમામ બાળકો લે છે, તેમને મુખ્ય સ્ટેકમાંથી બહાર કાઢે છે, અને તેમને એક અલગ સબ-સ્ટેકમાં જૂથ બનાવે છે, જેને આપણે સ્ટેકીંગ સંદર્ભ કહીએ છીએ. સ્થિત તત્વો માટે, આ ત્યારે થાય છે જ્યારે આપણે ઓટો સિવાય z-ઇન્ડેક્સ મૂલ્ય જાહેર કરીએ છીએ. અસ્પષ્ટતા, ટ્રાન્સફોર્મ અને ફિલ્ટર જેવા ગુણધર્મો માટે, જ્યારે ચોક્કસ મૂલ્યો લાગુ કરવામાં આવે ત્યારે સ્ટેકીંગ સંદર્ભ આપોઆપ બનાવવામાં આવે છે.
આને સમજવાનો પ્રયાસ કરો: એકવાર કાગળનો ટુકડો (એટલે કે, બાળ તત્વ) ફોલ્ડરની અંદર હોય (એટલે કે, માતાપિતાના સ્ટેકીંગ સંદર્ભ), તે ક્યારેય તે ફોલ્ડરમાંથી બહાર નીકળી શકતું નથી અથવા અલગ ફોલ્ડરમાં કાગળો વચ્ચે મૂકી શકાતું નથી. તેનું z-ઇન્ડેક્સ હવે માત્ર તેના પોતાના ફોલ્ડરમાં જ સંબંધિત છે.
નીચેના ચિત્રમાં, પેપર B હવે ફોલ્ડર B ના સ્ટેકીંગ સંદર્ભમાં છે, અને ફોલ્ડરમાં અન્ય કાગળો સાથે જ ઓર્ડર કરી શકાય છે.
કલ્પના કરો, જો તમે ઈચ્છો, તો તમારી પાસે તમારા ડેસ્ક પર બે ફોલ્ડર્સ છે:
ફોલ્ડર-a { z-ઇન્ડેક્સ: 1; } ફોલ્ડર-બી { z-ઇન્ડેક્સ: 2; }
ચાલો માર્કઅપને થોડું અપડેટ કરીએ. ફોલ્ડર Aની અંદર એક વિશિષ્ટ પૃષ્ઠ છે, z-ઇન્ડેક્સ: 9999. ફોલ્ડર Bની અંદર એક સાદા પૃષ્ઠ છે, z-ઇન્ડેક્સ: 5.
.સ્પેશિયલ-પેજ { z-ઇન્ડેક્સ: 9999; } સાદા-પૃષ્ઠ { z-ઇન્ડેક્સ: 5; }
કયું પૃષ્ઠ ટોચ પર છે? તે ફોલ્ડર B માં .plain-page છે. બ્રાઉઝર ચાઇલ્ડ પેપર્સને અવગણે છે અને પહેલા બે ફોલ્ડર્સને સ્ટેક કરે છે. તે ફોલ્ડર B (z-ઇન્ડેક્સ: 2) જુએ છે અને તેને ફોલ્ડર A (z-ઇન્ડેક્સ: 1) ની ટોચ પર મૂકે છે કારણ કે આપણે જાણીએ છીએ કે બે એક કરતા મોટા છે. દરમિયાન, .special-page z-index: 9999 પર સેટ કરેલું પૃષ્ઠ સ્ટેકના તળિયે છે, તેમ છતાં તેની z-ઇન્ડેક્સ સૌથી વધુ સંભવિત મૂલ્ય પર સેટ છે. સ્ટેકીંગ સંદર્ભો નેસ્ટેડ પણ કરી શકાય છે (ફોલ્ડર્સની અંદર ફોલ્ડર્સ), "ફેમિલી ટ્રી" બનાવીને. સમાન સિદ્ધાંત લાગુ પડે છે: બાળક ક્યારેય તેના માતાપિતાના ફોલ્ડરમાંથી છટકી શકતું નથી. હવે જ્યારે તમે સમજો છો કે સ્ટેકીંગ સંદર્ભો ફોલ્ડર્સની જેમ કેવી રીતે વર્તે છે કે જે સ્તરોને જૂથ બનાવે છે અને ફરીથી ગોઠવે છે, તે પૂછવા યોગ્ય છે: શા માટે ચોક્કસ ગુણધર્મો - જેમ કે રૂપાંતર અને અસ્પષ્ટ - નવા સ્ટેકીંગ સંદર્ભો બનાવે છે? અહીં વસ્તુ છે: આ ગુણધર્મો સ્ટેકીંગ સંદર્ભો બનાવતા નથી કારણ કે તેઓ કેવી દેખાય છે; બ્રાઉઝર હૂડ હેઠળ કેવી રીતે કાર્ય કરે છે તેના કારણે તેઓ તે કરે છે. જ્યારે તમે રૂપાંતર, અસ્પષ્ટતા, ફિલ્ટર અથવા પરિપ્રેક્ષ્ય લાગુ કરો છો, ત્યારે તમે બ્રાઉઝરને કહો છો કે, "હેય, આ તત્વ ખસેડી શકે છે, ફેરવી શકે છે અથવા ઝાંખું થઈ શકે છે, તેથી તૈયાર રહો!"
જ્યારે તમે આ ગુણધર્મોનો ઉપયોગ કરો છો, ત્યારે બ્રાઉઝર રેન્ડરિંગને વધુ અસરકારક રીતે સંચાલિત કરવા માટે એક નવો સ્ટેકીંગ સંદર્ભ બનાવે છે. આ બ્રાઉઝરને એનિમેશન, રૂપાંતર અને વિઝ્યુઅલ ઇફેક્ટ્સને સ્વતંત્ર રીતે હેન્ડલ કરવાની મંજૂરી આપે છે, આ તત્વો બાકીના પૃષ્ઠ સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે તેની પુનઃગણતરી કરવાની જરૂરિયાત ઘટાડે છે. તેને બ્રાઉઝર કહેતા તરીકે વિચારો, "હું આ ફોલ્ડરને અલગથી હેન્ડલ કરીશ જેથી જ્યારે પણ તેની અંદર કંઈક બદલાય ત્યારે મારે સમગ્ર ડેસ્કને ફરીથી બદલવાની જરૂર નથી." પરંતુ ત્યાં છેએક આડ અસર. એકવાર બ્રાઉઝર કોઈ તત્વને તેના પોતાના સ્તરમાં ઉપાડી લે, પછી તેણે તેની અંદરની દરેક વસ્તુને "સપાટ" કરવી જોઈએ, એક નવો સ્ટેકીંગ સંદર્ભ બનાવવો. તેને અલગથી હેન્ડલ કરવા માટે ડેસ્ક પરથી ફોલ્ડર લેવા જેવું છે; તે ફોલ્ડરની અંદરની દરેક વસ્તુને જૂથબદ્ધ કરવામાં આવે છે, અને બ્રાઉઝર હવે તેને એક એકમ તરીકે ગણે છે જ્યારે તે નક્કી કરે છે કે શું ટોચ પર છે. તેથી ભલે રૂપાંતર અને અસ્પષ્ટતા ગુણધર્મો એલિમેન્ટ્સ જે રીતે દૃષ્ટિથી સ્ટેક કરે છે તે રીતે અસર કરતી દેખાતી નથી, તેઓ કરે છે, અને તે પ્રદર્શન ઑપ્ટિમાઇઝેશન માટે છે. અન્ય કેટલીક CSS ગુણધર્મો પણ સમાન કારણોસર સ્ટેકીંગ સંદર્ભો બનાવી શકે છે. જો તમે વધુ ઊંડું ખોદવું હોય તો MDN સંપૂર્ણ સૂચિ પ્રદાન કરે છે. ત્યાં ઘણા બધા છે, જે ફક્ત તે સમજાવે છે કે અજાણતા સ્ટેકીંગ સંદર્ભને જાણ્યા વિના બનાવવું કેટલું સરળ છે. "અનસ્ટેકીંગ" સમસ્યા સ્ટેકીંગ સમસ્યાઓ ઘણા કારણોસર ઊભી થઈ શકે છે, પરંતુ કેટલાક અન્ય કરતા વધુ સામાન્ય છે. મોડલ ઘટકો એ ક્લાસિક પેટર્ન છે કારણ કે તેમને અન્ય તમામ ઘટકોની ઉપરના ટોચના સ્તર પર "ખોલવા" માટે ઘટકને ટૉગલ કરવાની જરૂર છે, પછી જ્યારે તે "બંધ" હોય ત્યારે તેને ટોચના સ્તરમાંથી દૂર કરવું જરૂરી છે. મને પૂરો વિશ્વાસ છે કે આપણે બધા એવી પરિસ્થિતિમાં આવી ગયા છીએ જ્યાં આપણે મોડલ ખોલીએ છીએ અને ગમે તે કારણોસર, તે દેખાતું નથી. એવું નથી કે તે યોગ્ય રીતે ખુલ્યું નથી, પરંતુ તે સ્ટેકીંગ સંદર્ભના નીચલા સ્તરમાં દૃશ્યની બહાર છે. આ તમને આશ્ચર્યમાં મૂકે છે "કેવી રીતે?" તમે સેટ કર્યા પછી:
.ઓવરલે { સ્થિતિ: નિશ્ચિત; /* સ્ટેકીંગ સંદર્ભ બનાવે છે */ z-ઇન્ડેક્સ: 1; /* તત્વને દરેક વસ્તુની ઉપર એક સ્તર પર મૂકે છે */ ઇનસેટ: 0; પહોળાઈ: 100%; ઊંચાઈ: 100vh; ઓવરફ્લો: છુપાયેલ; પૃષ્ઠભૂમિ-રંગ: #00000080; }
આ સાચું લાગે છે, પરંતુ જો મોડલ ટ્રિગર ધરાવતું પેરેન્ટ એલિમેન્ટ એ અન્ય પેરેન્ટ એલિમેન્ટમાંનું બાળક એલિમેન્ટ છે જે z-ઇન્ડેક્સ: 1 પર પણ સેટ છે, જે તકનીકી રીતે મોડલને મુખ્ય ફોલ્ડર દ્વારા અસ્પષ્ટ સબલેયરમાં મૂકે છે. ચાલો તે ચોક્કસ દૃશ્ય અને અન્ય કેટલાક સામાન્ય સ્ટેકીંગ-સંદર્ભ મુશ્કેલીઓ જોઈએ. મને લાગે છે કે તમે અજાણતા સ્ટેકીંગ સંદર્ભો બનાવવાનું કેટલું સરળ છે તે જ નહીં, પણ તેનું ગેરવ્યવસ્થાપન કેવી રીતે કરવું તે પણ જોશો. ઉપરાંત, તમે કેવી રીતે સંચાલિત સ્થિતિમાં પાછા ફરો છો તે પરિસ્થિતિ પર આધારિત છે. દૃશ્ય 1: ફસાયેલા મોડલ
તમે તરત જ તમારા મોડલને નિમ્ન-સ્તરના સ્તરમાં ફસાયેલા જોઈ શકો છો અને માતાપિતાને ઓળખી શકો છો. બ્રાઉઝર એક્સ્ટેન્શન્સ સ્માર્ટ વિકાસકર્તાઓએ મદદ કરવા માટે એક્સ્ટેંશન બનાવ્યાં છે. આ "CSS સ્ટેકીંગ કોન્ટેક્સ્ટ ઇન્સ્પેક્ટર" Chrome એક્સ્ટેંશન જેવા ટૂલ્સ તમારા DevTools માં વધારાની z-index ટેબ ઉમેરે છે જેથી તમને સ્ટેકીંગ સંદર્ભ બનાવતા તત્વો વિશેની માહિતી બતાવવામાં આવે.
IDE એક્સ્ટેન્શન્સ તમે VS કોડ માટે આના જેવા એક્સ્ટેંશન સાથે વિકાસ દરમિયાન સમસ્યાઓ પણ શોધી શકો છો, જે સંભવિત સ્ટેકીંગ સંદર્ભ સમસ્યાઓને સીધા તમારા સંપાદકમાં પ્રકાશિત કરે છે.
અનસ્ટેકીંગ અને ફરીથી નિયંત્રણ મેળવવું અમે મૂળ કારણ ઓળખી લીધા પછી, આગળનું પગલું તેની સાથે વ્યવહાર કરવાનું છે. આ સમસ્યાનો સામનો કરવા માટે તમે ઘણા અભિગમો અપનાવી શકો છો, અને હું તેમને ક્રમમાં સૂચિબદ્ધ કરીશ. તમે કોઈપણ સ્તરે કોઈપણને પસંદ કરી શકો છો, જોકે; કોઈ બીજાની ફરિયાદ કે અવરોધ કરી શકે નહીં. HTML સ્ટ્રક્ચર બદલો આને શ્રેષ્ઠ ફિક્સ ગણવામાં આવે છે. સ્ટેકીંગ સંદર્ભની સમસ્યાનો સામનો કરવા માટે, તમારે તમારા HTML ની અંદર રમુજી સ્થિતિમાં કેટલાક ઘટકો મૂક્યા હોવા જોઈએ. પૃષ્ઠનું પુનર્ગઠન તમને DOM ને ફરીથી આકાર આપવામાં અને સ્ટેકીંગ સંદર્ભ સમસ્યાને દૂર કરવામાં મદદ કરશે. સમસ્યારૂપ તત્વ શોધો અને તેને HTML માર્કઅપમાં ફસાયેલા તત્વમાંથી દૂર કરો. દાખલા તરીકે, આપણે .modal-કંટેનરને હેડરમાંથી બહાર ખસેડીને અને તેને જાતે જ
એલિમેન્ટમાં મૂકીને પ્રથમ દૃશ્ય, “ધ ટ્રેપ્ડ મોડલ” ઉકેલી શકીએ છીએ.હેડર
મુખ્ય સામગ્રી
આ સામગ્રીમાં 2 નું z-ઇન્ડેક્સ છે અને તે હજુ પણ મોડલને આવરી લેશે નહીં.
જ્યારે તમે "ઓપન મોડલ" બટન પર ક્લિક કરો છો, ત્યારે મોડલ બાકીની દરેક વસ્તુની સામે એવું માનવામાં આવે છે. પેન દૃશ્ય 1 જુઓ: શોયોમ્બો ગેબ્રિયલ અયોમાઇડ દ્વારા ટ્રેપ્ડ મોડલ (સોલ્યુશન) [ફોર્ક્ડ]. સમાયોજિત કરોCSS માં પિતૃ સ્ટેકીંગ સંદર્ભ જો તત્વ એક હોય તો તમે લેઆઉટને તોડ્યા વિના ખસેડી શકતા નથી? સમસ્યાને હલ કરવી વધુ સારું છે: માતાપિતા સંદર્ભ સ્થાપિત કરે છે. સંદર્ભને ટ્રિગર કરવા માટે જવાબદાર CSS ગુણધર્મ (અથવા ગુણધર્મો) શોધો અને તેને દૂર કરો. જો તેનો હેતુ છે અને તેને દૂર કરી શકાતો નથી, તો સમગ્ર કન્ટેનરને ઉપાડવા માટે માતાપિતાને તેના ભાઈ-બહેન તત્વો કરતાં વધુ z-ઇન્ડેક્સ મૂલ્ય આપો. ઉચ્ચ z-ઇન્ડેક્સ મૂલ્ય સાથે, પિતૃ કન્ટેનર ટોચ પર જાય છે, અને તેના બાળકો વપરાશકર્તાની નજીક દેખાય છે. અમે "ધ ડૂબેલા ડ્રોપડાઉન" દૃશ્યમાં જે શીખ્યા તેના આધારે, અમે ડ્રોપડાઉનને નેવબારની બહાર ખસેડી શકતા નથી; તેનો કોઈ અર્થ નથી. જો કે, અમે .navbar કન્ટેનરના z-ઇન્ડેક્સ મૂલ્યને .content એલિમેન્ટના z-ઇન્ડેક્સ મૂલ્ય કરતા વધારે વધારી શકીએ છીએ. .navbar { પૃષ્ઠભૂમિ: #333; /* z-ઇન્ડેક્સ: 1; */ z-ઇન્ડેક્સ: 3; સ્થિતિ: સંબંધિત; }
આ ફેરફાર સાથે, .ડ્રોપડાઉન-મેનૂ હવે કોઈપણ સમસ્યા વિના સામગ્રીની સામે દેખાય છે. પેન દૃશ્ય 2 જુઓ: શોયોમ્બો ગેબ્રિયલ અયોમાઇડ દ્વારા ડૂબેલું ડ્રોપડાઉન (સોલ્યુશન) [ફોર્ક્ડ]. જો કોઈ ફ્રેમવર્કનો ઉપયોગ કરી રહ્યાં હોય, તો પોર્ટલનો પ્રયાસ કરો React અથવા Vue જેવા ફ્રેમવર્કમાં, પોર્ટલ એ એક વિશેષતા છે જે તમને DOM માં તેના સામાન્ય પેરેન્ટ વંશવેલાની બહારના ઘટકોને રેન્ડર કરવા દે છે. પોર્ટલ તમારા ઘટકો માટે ટેલિપોર્ટેશન ઉપકરણ જેવા છે. તેઓ તમને પ્રોપ્સ, સ્ટેટ અને ઇવેન્ટ્સ માટે તેના મૂળ પિતૃ સાથે તાર્કિક રીતે કનેક્ટ રાખીને દસ્તાવેજમાં (સામાન્ય રીતે ડોક્યુમેન્ટ.બોડીમાં) ગમે ત્યાં ઘટકનું HTML રેન્ડર કરવા દે છે. આ સ્ટેકીંગ સંદર્ભ જાળમાંથી બહાર નીકળવા માટે યોગ્ય છે કારણ કે રેન્ડર કરેલ આઉટપુટ શાબ્દિક રીતે સમસ્યારૂપ પેરેન્ટ કન્ટેનરની બહાર દેખાય છે. ReactDOM.createPortal( <ટૂલટીપ />, દસ્તાવેજ.બોડી );
આ સુનિશ્ચિત કરે છે કે તમારું ડ્રોપડાઉન કન્ટેન્ટ તેના પેરેન્ટની પાછળ છુપાયેલું નથી, ભલે પેરન્ટ પાસે ઓવરફ્લો હોય: છુપાયેલ અથવા નીચું z-ઇન્ડેક્સ. "ધ ક્લિપ કરેલ ટૂલટિપ" દૃશ્યમાં અમે અગાઉ જોયું, મેં ટૂલટિપને ઓવરફ્લોમાંથી બચાવવા માટે પોર્ટલનો ઉપયોગ કર્યો: હિડન ક્લિપને દસ્તાવેજના મુખ્ય ભાગમાં મૂકીને અને તેને કન્ટેનરમાં ટ્રિગરની ઉપર સ્થિત કરીને. પેન દૃશ્ય 3 જુઓ: શોયોમ્બો ગેબ્રિયલ અયોમાઇડ દ્વારા ક્લિપ્ડ ટૂલટિપ (સોલ્યુશન) [ફોર્ક્ડ]. સાઇડ ઇફેક્ટ્સ વિના સ્ટેકીંગ સંદર્ભનો પરિચય અગાઉના વિભાગમાં સમજાવેલ તમામ અભિગમોનો ઉદ્દેશ્ય સમસ્યાવાળા સ્ટેકીંગ સંદર્ભોમાંથી તત્વોને "અનસ્ટેકીંગ" કરવાનો છે, પરંતુ કેટલીક પરિસ્થિતિઓ એવી છે કે જ્યાં તમને ખરેખર સ્ટેકીંગ સંદર્ભની જરૂર પડશે અથવા બનાવવા માંગો છો. નવો સ્ટેકીંગ સંદર્ભ બનાવવો સરળ છે, પરંતુ તમામ અભિગમો આડઅસર સાથે આવે છે. એટલે કે, isolation નો ઉપયોગ કરવા સિવાય: isolate. જ્યારે કોઈ તત્વ પર લાગુ કરવામાં આવે છે, ત્યારે તે તત્વના બાળકોનો સ્ટેકીંગ સંદર્ભ દરેક બાળક અને તે સંદર્ભમાં તેની બહારના તત્વોથી પ્રભાવિત થવાને બદલે તેના સંબંધમાં નક્કી કરવામાં આવે છે. ઉત્તમ ઉદાહરણ એ એલિમેન્ટને નકારાત્મક મૂલ્ય સોંપવાનું છે, જેમ કે z-ઇન્ડેક્સ: -1. કલ્પના કરો કે તમારી પાસે .card ઘટક છે. તમે એક સુશોભન આકાર ઉમેરવા માંગો છો જે .cardના ટેક્સ્ટની પાછળ બેસે છે, પરંતુ કાર્ડની પૃષ્ઠભૂમિની ટોચ પર. કાર્ડ પર સ્ટેકીંગ સંદર્ભ વગર, z-index: -1 આકારને રૂટ સ્ટેકીંગ સંદર્ભ (આખું પૃષ્ઠ) ની નીચે મોકલે છે. આનાથી તે .cardની સફેદ પૃષ્ઠભૂમિ પાછળ અદૃશ્ય થઈ જાય છે: શોયોમ્બો ગેબ્રિયલ અયોમાઇડ દ્વારા પેન નેગેટિવ z-ઇન્ડેક્સ (સમસ્યા) [ફોર્ક્ડ] જુઓ. આના ઉકેલ માટે, અમે અલગતા જાહેર કરીએ છીએ: માતાપિતા .કાર્ડ પર અલગતા: શોયોમ્બો ગેબ્રિયલ અયોમાઇડ દ્વારા પેન નેગેટિવ z-ઇન્ડેક્સ (સોલ્યુશન) [ફોર્ક્ડ] જુઓ. હવે, .card તત્વ પોતે સ્ટેકીંગ સંદર્ભ બની જાય છે. જ્યારે તેનું ચાઈલ્ડ એલિમેન્ટ — :before pseudo-element — પર બનાવેલ સુશોભિત આકાર — z-index: -1 ધરાવે છે, ત્યારે તે માતાપિતાના સ્ટેકીંગ સંદર્ભના એકદમ તળિયે જાય છે. તે ઇરાદા મુજબ ટેક્સ્ટની પાછળ અને કાર્ડની પૃષ્ઠભૂમિની ટોચ પર સંપૂર્ણ રીતે બેસે છે. નિષ્કર્ષ યાદ રાખો: આગલી વખતે જ્યારે તમારું z-ઇન્ડેક્સ નિયંત્રણની બહાર જણાશે, ત્યારે તે ફસાયેલા સ્ટેકીંગ સંદર્ભ છે. સંદર્ભો
સ્ટેકીંગ સંદર્ભ (MDN) Z-ઇન્ડેક્સ અને સ્ટેકીંગ સંદર્ભો (web.dev) "સીએસએસમાં આઇસોલેશન પ્રોપર્ટી સાથે નવો સ્ટેકીંગ સંદર્ભ કેવી રીતે બનાવવો", નતાલી પિના “વ્હોટ ધ હેક, ઝેડ-ઇન્ડેક્સ??”, જોશ કોમ્યુ
SmashingMag પર વધુ વાંચન
"મોટા પ્રોજેક્ટ્સમાં CSS Z-ઇન્ડેક્સનું સંચાલન", સ્ટીવન ફ્રાઈસન "સ્ટીકી હેડર્સ એન્ડ ફુલ-હાઈટ એલિમેન્ટ્સ: અ ટ્રીકી કોમ્બિનેશન", ફિલિપ બ્રૌનેન "એક ઘટક-આધારિત વેબ એપ્લિકેશનમાં Z-ઇન્ડેક્સનું સંચાલન", પાવેલ પોમેરન્ટસેવ "ધ ઝેડ-ઇન્ડેક્સ CSS પ્રોપર્ટી: એ કોમ્પ્રીહેન્સિવ લુક", લુઈસ લાઝારિસ
