നിങ്ങളുടെ CSS-ലെ ഒരു ഘടകത്തിൽ നിങ്ങൾ എപ്പോഴെങ്കിലും z-ഇൻഡക്സ്: 99999 സജ്ജീകരിച്ചിട്ടുണ്ടോ, അത് മറ്റ് ഘടകങ്ങളുടെ മുകളിൽ വരുന്നില്ലേ? എല്ലാ വ്യത്യസ്ത ഘടകങ്ങളും ഒന്നുകിൽ കുറഞ്ഞ മൂല്യത്തിൽ സജ്ജീകരിച്ചിരിക്കുന്നു അല്ലെങ്കിൽ സജ്ജീകരിച്ചിട്ടില്ലെന്ന് കരുതി, ആ ഘടകത്തെ മറ്റെന്തിനും മുകളിൽ ദൃശ്യപരമായി സ്ഥാപിക്കാൻ കഴിയുന്ന വലിയ മൂല്യം. ഒരു വെബ്പേജ് സാധാരണയായി ഒരു ദ്വിമാന സ്ഥലത്ത് പ്രതിനിധീകരിക്കുന്നു; എന്നിരുന്നാലും, നിർദ്ദിഷ്ട CSS പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുന്നതിലൂടെ, ആഴം അറിയിക്കുന്നതിനായി ഒരു സാങ്കൽപ്പിക z- ആക്സിസ് തലം അവതരിപ്പിക്കുന്നു. ഈ തലം സ്ക്രീനിലേക്ക് ലംബമാണ്, അതിൽ നിന്ന്, ഉപയോക്താവ് ഘടകങ്ങളുടെ ക്രമം, ഒന്നിനുപുറകെ ഒന്നായി മനസ്സിലാക്കുന്നു. സാങ്കൽപ്പിക z-ആക്സിസിന് പിന്നിലെ ആശയം, സ്റ്റാക്ക് ചെയ്ത ഘടകങ്ങളെക്കുറിച്ചുള്ള ഉപയോക്താവിൻ്റെ ധാരണ, അത് സൃഷ്ടിക്കുന്ന CSS പ്രോപ്പർട്ടികൾ സംയോജിപ്പിച്ച് സ്റ്റാക്കിംഗ് സന്ദർഭം എന്ന് വിളിക്കുന്ന രൂപത്തിലേക്ക് മാറുന്നു എന്നതാണ്. ഒരു വെബ്പേജിൽ ഘടകങ്ങൾ എങ്ങനെ അടുക്കി വച്ചിരിക്കുന്നു, സ്റ്റാക്കിംഗ് ഓർഡറിനെ എന്താണ് നിയന്ത്രിക്കുന്നത്, ആവശ്യമുള്ളപ്പോൾ ഘടകങ്ങൾ "അൺസ്റ്റാക്ക്" ചെയ്യുന്നതിനുള്ള പ്രായോഗിക സമീപനങ്ങൾ എന്നിവയെക്കുറിച്ചാണ് ഞങ്ങൾ സംസാരിക്കാൻ പോകുന്നത്. സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങളെ കുറിച്ച് നിങ്ങളുടെ വെബ്പേജ് ഒരു ഡെസ്ക് ആയി സങ്കൽപ്പിക്കുക. നിങ്ങൾ HTML ഘടകങ്ങൾ ചേർക്കുമ്പോൾ, നിങ്ങൾ മേശപ്പുറത്ത് ഒന്നിനുപുറകെ ഒന്നായി കടലാസ് കഷണങ്ങൾ ഇടുന്നു. അവസാനമായി വെച്ച കടലാസ് കഷണം ഏറ്റവും അടുത്തിടെ ചേർത്ത HTML ഘടകത്തിന് തുല്യമാണ്, കൂടാതെ അതിന് മുമ്പായി സ്ഥാപിച്ചിട്ടുള്ള മറ്റെല്ലാ പേപ്പറുകൾക്കും മുകളിൽ അത് ഇരിക്കും. നെസ്റ്റഡ് എലമെൻ്റുകൾക്ക് പോലും ഇത് സാധാരണ ഡോക്യുമെൻ്റ് ഫ്ലോ ആണ്. മറ്റെല്ലാ ഫോൾഡറുകളും അടങ്ങുന്ന ഘടകം രൂപീകരിച്ച റൂട്ട് സ്റ്റാക്കിംഗ് സന്ദർഭത്തെ ഡെസ്ക് തന്നെ പ്രതിനിധീകരിക്കുന്നു. ഇപ്പോൾ, നിർദ്ദിഷ്ട CSS പ്രോപ്പർട്ടികൾ പ്രവർത്തിക്കുന്നു. സ്ഥാനം (z-ഇൻഡക്സിനൊപ്പം), അതാര്യത, രൂപാന്തരം, അടങ്ങിയിരിക്കൽ എന്നിവ പോലുള്ള പ്രോപ്പർട്ടികൾ ഒരു ഫോൾഡർ പോലെ പ്രവർത്തിക്കുന്നു. ഈ ഫോൾഡർ ഒരു ഘടകത്തെയും അതിലെ എല്ലാ കുട്ടികളെയും എടുത്ത്, അവയെ പ്രധാന സ്റ്റാക്കിൽ നിന്ന് എക്സ്ട്രാക്റ്റുചെയ്ത് അവയെ ഒരു പ്രത്യേക സബ്-സ്റ്റാക്കിലേക്ക് ഗ്രൂപ്പുചെയ്യുന്നു, ഞങ്ങൾ സ്റ്റാക്കിംഗ് സന്ദർഭം എന്ന് വിളിക്കുന്നത് സൃഷ്ടിക്കുന്നു. പൊസിഷൻ ചെയ്ത ഘടകങ്ങൾക്ക്, സ്വയമേവ ഒഴികെയുള്ള ഒരു z-ഇൻഡക്സ് മൂല്യം ഞങ്ങൾ പ്രഖ്യാപിക്കുമ്പോൾ ഇത് സംഭവിക്കുന്നു. അതാര്യത, രൂപാന്തരം, ഫിൽട്ടർ എന്നിവ പോലുള്ള പ്രോപ്പർട്ടികൾക്കായി, നിർദ്ദിഷ്ട മൂല്യങ്ങൾ പ്രയോഗിക്കുമ്പോൾ സ്റ്റാക്കിംഗ് സന്ദർഭം സ്വയമേവ സൃഷ്ടിക്കപ്പെടും.
ഇത് മനസിലാക്കാൻ ശ്രമിക്കുക: ഒരിക്കൽ ഒരു കടലാസ് കഷണം (അതായത്, ഒരു ചൈൽഡ് എലമെൻ്റ്) ഒരു ഫോൾഡറിനുള്ളിലാണെങ്കിൽ (അതായത്, രക്ഷിതാവിൻ്റെ സ്റ്റാക്കിംഗ് സന്ദർഭം), അതിന് ഒരിക്കലും ആ ഫോൾഡറിൽ നിന്ന് പുറത്തുകടക്കാനോ മറ്റൊരു ഫോൾഡറിലെ പേപ്പറുകൾക്കിടയിൽ സ്ഥാപിക്കാനോ കഴിയില്ല. അതിൻ്റെ z-ഇൻഡക്സ് ഇപ്പോൾ അതിൻ്റെ സ്വന്തം ഫോൾഡറിനുള്ളിൽ മാത്രം പ്രസക്തമാണ്.
ചുവടെയുള്ള ചിത്രീകരണത്തിൽ, പേപ്പർ ബി ഇപ്പോൾ ഫോൾഡർ ബിയുടെ സ്റ്റാക്കിംഗ് സന്ദർഭത്തിലാണ്, കൂടാതെ ഫോൾഡറിലെ മറ്റ് പേപ്പറുകൾക്കൊപ്പം മാത്രമേ ഓർഡർ ചെയ്യാൻ കഴിയൂ.
നിങ്ങൾക്ക് വേണമെങ്കിൽ, നിങ്ങളുടെ മേശപ്പുറത്ത് രണ്ട് ഫോൾഡറുകൾ ഉണ്ടെന്ന് സങ്കൽപ്പിക്കുക:
.folder-a {z-index: 1; } .folder-b {z-index: 2; }
നമുക്ക് മാർക്ക്അപ്പ് അൽപ്പം അപ്ഡേറ്റ് ചെയ്യാം. അകത്തുള്ള ഫോൾഡർ എ ഒരു പ്രത്യേക പേജാണ്, z-ഇൻഡക്സ്: 9999. ഉള്ളിലുള്ള ഫോൾഡർ ബി ഒരു പ്ലെയിൻ പേജാണ്, z-ഇൻഡക്സ്: 5.
.സ്പെഷ്യൽ പേജ് {z-ഇൻഡക്സ്: 9999; } .plain-page {z-index: 5; }
ഏത് പേജാണ് മുകളിലുള്ളത്? ഇത് B ഫോൾഡറിലെ .plain-page ആണ്. ബ്രൗസർ ചൈൽഡ് പേപ്പറുകൾ അവഗണിക്കുകയും രണ്ട് ഫോൾഡറുകൾ ആദ്യം അടുക്കുകയും ചെയ്യുന്നു. ഇത് ഫോൾഡർ ബി (z-ഇൻഡക്സ്: 2) കാണുകയും ഫോൾഡർ എ (z-ഇൻഡക്സ്: 1) യുടെ മുകളിൽ സ്ഥാപിക്കുകയും ചെയ്യുന്നു, കാരണം രണ്ട് ഒന്നിനെക്കാൾ വലുതാണെന്ന് നമുക്കറിയാം. അതേസമയം, .special-page set to z-index: 9999 പേജ് അതിൻ്റെ z-ഇൻഡക്സ് സാധ്യമായ ഏറ്റവും ഉയർന്ന മൂല്യത്തിലേക്ക് സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിലും സ്റ്റാക്കിൻ്റെ താഴെയാണ്. ഒരു "കുടുംബ വൃക്ഷം" സൃഷ്ടിക്കുന്ന സന്ദർഭങ്ങൾ (ഫോൾഡറുകൾക്കുള്ളിലെ ഫോൾഡറുകൾ) കൂടിച്ചേരാനും കഴിയും. ഇതേ തത്ത്വം ബാധകമാണ്: ഒരു കുട്ടിക്ക് ഒരിക്കലും മാതാപിതാക്കളുടെ ഫോൾഡറിൽ നിന്ന് രക്ഷപ്പെടാൻ കഴിയില്ല. ലെയറുകൾ ഗ്രൂപ്പുചെയ്യുകയും പുനഃക്രമീകരിക്കുകയും ചെയ്യുന്ന ഫോൾഡറുകൾ പോലെ സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഇപ്പോൾ നിങ്ങൾക്ക് മനസ്സിലായി, ഇത് ചോദിക്കേണ്ടതാണ്: ചില പ്രോപ്പർട്ടികൾ - പരിവർത്തനം, അതാര്യത എന്നിവ - എന്തിനാണ് പുതിയ സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങൾ സൃഷ്ടിക്കുന്നത്? സംഗതി ഇതാണ്: ഈ പ്രോപ്പർട്ടികൾ അവ എങ്ങനെ കാണപ്പെടുന്നു എന്നതിനാൽ സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങൾ സൃഷ്ടിക്കുന്നില്ല; ബ്രൗസർ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനാലാണ് അവർ അത് ചെയ്യുന്നത്. നിങ്ങൾ പരിവർത്തനം, അതാര്യത, ഫിൽട്ടർ അല്ലെങ്കിൽ വീക്ഷണം പ്രയോഗിക്കുമ്പോൾ, നിങ്ങൾ ബ്രൗസറിനോട് പറയുന്നു, "ഹേയ്, ഈ ഘടകം നീങ്ങുകയോ തിരിക്കുകയോ മങ്ങുകയോ ചെയ്യാം, അതിനാൽ തയ്യാറാകൂ!"
നിങ്ങൾ ഈ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുമ്പോൾ, റെൻഡറിംഗ് കൂടുതൽ കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യാൻ ബ്രൗസർ ഒരു പുതിയ സ്റ്റാക്കിംഗ് സന്ദർഭം സൃഷ്ടിക്കുന്നു. ആനിമേഷനുകൾ, പരിവർത്തനങ്ങൾ, വിഷ്വൽ ഇഫക്റ്റുകൾ എന്നിവ സ്വതന്ത്രമായി കൈകാര്യം ചെയ്യാൻ ബ്രൗസറിനെ ഇത് അനുവദിക്കുന്നു, ഈ ഘടകങ്ങൾ പേജിൻ്റെ ബാക്കി ഭാഗങ്ങളുമായി എങ്ങനെ സംവദിക്കുന്നുവെന്ന് വീണ്ടും കണക്കാക്കേണ്ടതിൻ്റെ ആവശ്യകത കുറയ്ക്കുന്നു. "ഞാൻ ഈ ഫോൾഡർ വെവ്വേറെ കൈകാര്യം ചെയ്യും, അതിനാൽ അതിനുള്ളിലെ എന്തെങ്കിലും മാറ്റമുണ്ടാകുമ്പോഴെല്ലാം മുഴുവൻ ഡെസ്ക്കും പുനഃക്രമീകരിക്കേണ്ടതില്ല" എന്ന് ബ്രൗസർ പറയുന്നതായി കരുതുക. പക്ഷേ ഉണ്ട്ഒരു പാർശ്വഫലങ്ങൾ. ബ്രൗസർ അതിൻ്റെ സ്വന്തം ലെയറിലേക്ക് ഒരു ഘടകത്തെ ഉയർത്തിക്കഴിഞ്ഞാൽ, അതിനുള്ളിലെ എല്ലാം "പരന്നതാക്കുക", ഒരു പുതിയ സ്റ്റാക്കിംഗ് സന്ദർഭം സൃഷ്ടിക്കുക. ഇത് വെവ്വേറെ കൈകാര്യം ചെയ്യാൻ ഡെസ്കിൽ നിന്ന് ഒരു ഫോൾഡർ എടുക്കുന്നത് പോലെയാണ്; ആ ഫോൾഡറിനുള്ളിലെ എല്ലാം ഗ്രൂപ്പുചെയ്യപ്പെടും, എന്തിന് മുകളിൽ ഇരിക്കണമെന്ന് തീരുമാനിക്കുമ്പോൾ ബ്രൗസർ ഇപ്പോൾ അതിനെ ഒരൊറ്റ യൂണിറ്റായി കണക്കാക്കുന്നു. അതിനാൽ, രൂപാന്തരവും അതാര്യതയും ഘടകങ്ങൾ ദൃശ്യപരമായി അടുക്കുന്ന രീതിയെ ബാധിക്കുന്നതായി തോന്നില്ലെങ്കിലും, അവ ചെയ്യുന്നു, ഇത് പ്രകടന ഒപ്റ്റിമൈസേഷനാണ്. സമാനമായ കാരണങ്ങളാൽ മറ്റ് നിരവധി CSS പ്രോപ്പർട്ടികൾക്കും സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും. നിങ്ങൾക്ക് കൂടുതൽ ആഴത്തിൽ കുഴിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ MDN ഒരു പൂർണ്ണമായ ലിസ്റ്റ് നൽകുന്നു. വളരെ കുറച്ച് ഉണ്ട്, അത് അറിയാതെ ഒരു സ്റ്റാക്കിംഗ് സന്ദർഭം അശ്രദ്ധമായി സൃഷ്ടിക്കുന്നത് എത്ര എളുപ്പമാണെന്ന് വ്യക്തമാക്കുന്നു. "അൺസ്റ്റാക്കിംഗ്" പ്രശ്നം പല കാരണങ്ങളാൽ സ്റ്റാക്കിംഗ് പ്രശ്നങ്ങൾ ഉണ്ടാകാം, എന്നാൽ ചിലത് മറ്റുള്ളവയേക്കാൾ സാധാരണമാണ്. മോഡൽ ഘടകങ്ങൾ ഒരു ക്ലാസിക് പാറ്റേൺ ആണ്, കാരണം മറ്റെല്ലാ ഘടകങ്ങളെക്കാളും മുകളിലെ ലെയറിൽ "തുറക്കാൻ" ഘടകം ടോഗിൾ ചെയ്യേണ്ടതുണ്ട്, തുടർന്ന് "അടച്ചിരിക്കുമ്പോൾ" മുകളിലെ പാളിയിൽ നിന്ന് അത് നീക്കംചെയ്യേണ്ടതുണ്ട്. ഒരു മോഡൽ തുറക്കുന്നതും ഒരു കാരണവശാലും അത് ദൃശ്യമാകാത്തതുമായ ഒരു സാഹചര്യത്തിലേക്ക് നാമെല്ലാവരും കടന്നുപോയതായി എനിക്ക് നല്ല ആത്മവിശ്വാസമുണ്ട്. ഇത് ശരിയായി തുറന്നില്ല എന്നല്ല, സ്റ്റാക്കിംഗ് സന്ദർഭത്തിൻ്റെ താഴത്തെ പാളിയിൽ ഇത് കാഴ്ചയ്ക്ക് പുറത്താണ്. ഇത് "എങ്ങനെയാണ്?" നിങ്ങൾ സജ്ജമാക്കിയത് മുതൽ:
.ഓവർലേ { സ്ഥാനം: സ്ഥിരം; /* സ്റ്റാക്കിംഗ് സന്ദർഭം സൃഷ്ടിക്കുന്നു */ z-സൂചിക: 1; /* മറ്റെല്ലാറ്റിനും മുകളിൽ ഒരു ലെയറിൽ മൂലകത്തെ ഇടുന്നു */ ഇൻസെറ്റ്: 0; വീതി: 100%; ഉയരം: 100vh; കവിഞ്ഞൊഴുകുക: മറഞ്ഞിരിക്കുന്നു; പശ്ചാത്തല നിറം: #00000080; }
ഇത് ശരിയാണെന്ന് തോന്നുന്നു, എന്നാൽ മോഡൽ ട്രിഗർ അടങ്ങിയിരിക്കുന്ന പാരൻ്റ് എലമെൻ്റ് മറ്റൊരു പാരൻ്റ് എലമെൻ്റിനുള്ളിലെ ചൈൽഡ് എലമെൻ്റ് ആണെങ്കിൽ, അത് z-ഇൻഡക്സ്: 1 ആയി സജ്ജീകരിച്ചിരിക്കുന്നു, അത് സാങ്കേതികമായി പ്രധാന ഫോൾഡറിൽ നിന്ന് മറച്ച ഒരു സബ്ലെയറിൽ മോഡൽ സ്ഥാപിക്കുന്നു. നമുക്ക് ആ പ്രത്യേക സാഹചര്യവും മറ്റ് രണ്ട് സാധാരണ സ്റ്റാക്കിംഗ്-സന്ദർഭ അപകടങ്ങളും നോക്കാം. അശ്രദ്ധമായി സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങൾ സൃഷ്ടിക്കുന്നത് എത്ര എളുപ്പമാണെന്ന് മാത്രമല്ല, അവ എങ്ങനെ തെറ്റായി കൈകാര്യം ചെയ്യാമെന്നും നിങ്ങൾ കാണുമെന്ന് ഞാൻ കരുതുന്നു. കൂടാതെ, നിയന്ത്രിത അവസ്ഥയിലേക്ക് നിങ്ങൾ എങ്ങനെ മടങ്ങുന്നു എന്നത് സാഹചര്യത്തെ ആശ്രയിച്ചിരിക്കുന്നു. രംഗം 1: ട്രാപ്പ്ഡ് മോഡൽ
നിങ്ങളുടെ മോഡൽ താഴ്ന്ന നിലയിലുള്ള ലെയറിൽ കുടുങ്ങിക്കിടക്കുന്നത് നിങ്ങൾക്ക് കാണാനും രക്ഷിതാവിനെ തിരിച്ചറിയാനും കഴിയും. ബ്രൗസർ വിപുലീകരണങ്ങൾ സ്മാർട്ട് ഡെവലപ്പർമാർ സഹായിക്കാൻ വിപുലീകരണങ്ങൾ നിർമ്മിച്ചിട്ടുണ്ട്. "CSS സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റ് ഇൻസ്പെക്ടർ" Chrome എക്സ്റ്റൻഷൻ പോലെയുള്ള ടൂളുകൾ, ഒരു സ്റ്റാക്കിംഗ് സന്ദർഭം സൃഷ്ടിക്കുന്ന ഘടകങ്ങളെക്കുറിച്ചുള്ള വിവരങ്ങൾ കാണിക്കുന്നതിന് നിങ്ങളുടെ DevTools-ലേക്ക് ഒരു അധിക z-ഇൻഡക്സ് ടാബ് ചേർക്കുന്നു.
IDE വിപുലീകരണങ്ങൾ വിഎസ് കോഡിനായി ഇതുപോലുള്ള ഒരു വിപുലീകരണം ഉപയോഗിച്ച് നിങ്ങൾക്ക് വികസന സമയത്ത് പ്രശ്നങ്ങൾ കണ്ടെത്താനും കഴിയും, ഇത് നിങ്ങളുടെ എഡിറ്ററിൽ നേരിട്ട് സ്റ്റാക്കിംഗ് സന്ദർഭ പ്രശ്നങ്ങൾ ഉയർത്തിക്കാട്ടുന്നു.
അൺസ്റ്റാക്കിംഗ്, നിയന്ത്രണം വീണ്ടെടുക്കൽ മൂലകാരണം തിരിച്ചറിഞ്ഞ ശേഷം, അടുത്ത ഘട്ടം അത് കൈകാര്യം ചെയ്യുക എന്നതാണ്. ഈ പ്രശ്നം പരിഹരിക്കാൻ നിങ്ങൾക്ക് നിരവധി സമീപനങ്ങളുണ്ട്, ഞാൻ അവ ക്രമത്തിൽ പട്ടികപ്പെടുത്തും. നിങ്ങൾക്ക് ഏത് തലത്തിലും ആരെയും തിരഞ്ഞെടുക്കാം, എന്നിരുന്നാലും; ആർക്കും മറ്റൊരാളെ പരാതിപ്പെടാനോ തടസ്സപ്പെടുത്താനോ കഴിയില്ല. HTML ഘടന മാറ്റുക ഇത് ഒപ്റ്റിമൽ ഫിക്സായി കണക്കാക്കപ്പെടുന്നു. നിങ്ങൾ ഒരു സ്റ്റാക്കിംഗ് സന്ദർഭ പ്രശ്നത്തിലേക്ക് കടക്കുന്നതിന്, നിങ്ങളുടെ HTML-ൽ ചില ഘടകങ്ങൾ രസകരമായ സ്ഥാനങ്ങളിൽ സ്ഥാപിച്ചിരിക്കണം. പേജ് പുനഃക്രമീകരിക്കുന്നത് DOM-നെ പുനഃക്രമീകരിക്കാനും സ്റ്റാക്കിംഗ് സന്ദർഭ പ്രശ്നം ഇല്ലാതാക്കാനും നിങ്ങളെ സഹായിക്കും. പ്രശ്നമുള്ള ഘടകം കണ്ടെത്തി HTML മാർക്ക്അപ്പിലെ ട്രാപ്പിംഗ് എലമെൻ്റിൽ നിന്ന് അത് നീക്കം ചെയ്യുക. ഉദാഹരണത്തിന്, .modal-container നെ ഹെഡറിൽ നിന്ന് പുറത്തേക്ക് നീക്കി
എലമെൻ്റിൽ സ്വയം സ്ഥാപിച്ചുകൊണ്ട് നമുക്ക് ആദ്യത്തെ സാഹചര്യമായ "The Trapped Modal" പരിഹരിക്കാനാകും.ഈ ഉള്ളടക്കത്തിന് 2-ൻ്റെ z-ഇൻഡക്സ് ഉണ്ട്, അത് ഇപ്പോഴും മോഡൽ ഉൾക്കൊള്ളുന്നില്ല.തലക്കെട്ട്
പ്രധാന ഉള്ളടക്കം
നിങ്ങൾ "ഓപ്പൺ മോഡൽ" ബട്ടണിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, മോഡൽ മറ്റെല്ലാറ്റിനും മുമ്പിൽ സ്ഥാനം പിടിക്കും. ഷോയോംബോ ഗബ്രിയേൽ അയോമൈഡിൻ്റെ പെൻ സീനാരിയോ 1: ദി ട്രാപ്പ്ഡ് മോഡൽ (പരിഹാരം) [ഫോർക്ക്ഡ്] കാണുക. ക്രമീകരിക്കുകCSS-ൽ പാരൻ്റ് സ്റ്റാക്കിംഗ് സന്ദർഭം ലേഔട്ട് തകർക്കാതെ നിങ്ങൾക്ക് നീക്കാൻ കഴിയാത്ത ഒന്നാണെങ്കിൽ എന്തുചെയ്യും? പ്രശ്നം പരിഹരിക്കുന്നതാണ് നല്ലത്: മാതാപിതാക്കൾ സന്ദർഭം സ്ഥാപിക്കുന്നു. സന്ദർഭം ട്രിഗർ ചെയ്യുന്നതിന് ഉത്തരവാദികളായ CSS പ്രോപ്പർട്ടി (അല്ലെങ്കിൽ പ്രോപ്പർട്ടികൾ) കണ്ടെത്തി അത് നീക്കം ചെയ്യുക. ഇതിന് ഒരു ഉദ്ദേശ്യമുണ്ടെങ്കിൽ അത് നീക്കം ചെയ്യാൻ കഴിയുന്നില്ലെങ്കിൽ, മുഴുവൻ കണ്ടെയ്നറും ഉയർത്തുന്നതിന് രക്ഷിതാവിന് അതിൻ്റെ സഹോദര ഘടകങ്ങളേക്കാൾ ഉയർന്ന z- സൂചിക മൂല്യം നൽകുക. ഉയർന്ന z-ഇൻഡക്സ് മൂല്യം ഉപയോഗിച്ച്, പാരൻ്റ് കണ്ടെയ്നർ മുകളിലേക്ക് നീങ്ങുന്നു, അതിലെ കുട്ടികൾ ഉപയോക്താവിനോട് കൂടുതൽ അടുത്ത് കാണപ്പെടും. "സബ്മെർജ്ഡ് ഡ്രോപ്പ്ഡൗൺ" സീനറിയോയിൽ ഞങ്ങൾ പഠിച്ചതിൻ്റെ അടിസ്ഥാനത്തിൽ, ഡ്രോപ്പ്ഡൗൺ നാവ്ബാറിൽ നിന്ന് നീക്കാൻ ഞങ്ങൾക്ക് കഴിയില്ല; അത് അർത്ഥമാക്കുന്നില്ല. എന്നിരുന്നാലും, .navbar കണ്ടെയ്നറിൻ്റെ z-ഇൻഡക്സ് മൂല്യം .content എലമെൻ്റിൻ്റെ z-ഇൻഡക്സ് മൂല്യത്തേക്കാൾ വലുതായി വർദ്ധിപ്പിക്കാം. .navbar { പശ്ചാത്തലം: #333; /* z-ഇൻഡക്സ്: 1; */ z-സൂചിക: 3; സ്ഥാനം: ബന്ധു; }
ഈ മാറ്റത്തോടെ, .dropdown-menu ഇപ്പോൾ ഒരു പ്രശ്നവുമില്ലാതെ ഉള്ളടക്കത്തിന് മുന്നിൽ ദൃശ്യമാകുന്നു. ഷോയോംബോ ഗബ്രിയേൽ അയോമൈഡിൻ്റെ പെൻ രംഗം 2: വെള്ളത്തിനടിയിലായ ഡ്രോപ്പ്ഡൗൺ (പരിഹാരം) [ഫോർക്ക്ഡ്] കാണുക. ഒരു ചട്ടക്കൂട് ഉപയോഗിക്കുകയാണെങ്കിൽ പോർട്ടലുകൾ പരീക്ഷിക്കുക React അല്ലെങ്കിൽ Vue പോലുള്ള ചട്ടക്കൂടുകളിൽ, DOM-ൽ അതിൻ്റെ സാധാരണ പാരൻ്റ് ശ്രേണിക്ക് പുറത്ത് ഒരു ഘടകം റെൻഡർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു സവിശേഷതയാണ് പോർട്ടൽ. നിങ്ങളുടെ ഘടകങ്ങൾക്കുള്ള ഒരു ടെലിപോർട്ടേഷൻ ഉപകരണം പോലെയാണ് പോർട്ടലുകൾ. ഒരു ഘടകത്തിൻ്റെ HTML ഡോക്യുമെൻ്റിൽ എവിടെയും (സാധാരണയായി document.body എന്നതിലേക്ക് തന്നെ) റെൻഡർ ചെയ്യാൻ അവർ നിങ്ങളെ അനുവദിക്കുന്നു, അതേസമയം പ്രോപ്സ്, സ്റ്റേറ്റ്, ഇവൻ്റുകൾ എന്നിവയ്ക്കായി അതിൻ്റെ യഥാർത്ഥ രക്ഷകർത്താവുമായി ലോജിക്കൽ കണക്റ്റ് ചെയ്തിരിക്കുന്നു. റെൻഡർ ചെയ്ത ഔട്ട്പുട്ട് അക്ഷരാർത്ഥത്തിൽ പ്രശ്നകരമായ പാരൻ്റ് കണ്ടെയ്നറിന് പുറത്ത് ദൃശ്യമാകുന്നതിനാൽ സ്റ്റാക്കിംഗ് സന്ദർഭ ട്രാപ്പുകളിൽ നിന്ന് രക്ഷപ്പെടാൻ ഇത് അനുയോജ്യമാണ്. ReactDOM.createPortal( <ടൂൾടിപ്പ് />, പ്രമാണം.ശരീരം );
രക്ഷിതാവിന് ഓവർഫ്ലോ ഉണ്ടെങ്കിൽപ്പോലും, നിങ്ങളുടെ ഡ്രോപ്പ്ഡൗൺ ഉള്ളടക്കം അതിൻ്റെ രക്ഷിതാവിന് പിന്നിൽ മറഞ്ഞിട്ടില്ലെന്ന് ഇത് ഉറപ്പാക്കുന്നു: മറച്ചതോ താഴ്ന്നതോ ആയ z-ഇൻഡക്സ്. നമ്മൾ നേരത്തെ നോക്കിയ "ദി ക്ലിപ്പ്ഡ് ടൂൾടിപ്പ്" സാഹചര്യത്തിൽ, ടൂൾടിപ്പ് ഓവർഫ്ലോയിൽ നിന്ന് രക്ഷപ്പെടുത്താൻ ഞാൻ ഒരു പോർട്ടൽ ഉപയോഗിച്ചു: ഡോക്യുമെൻ്റ് ബോഡിയിൽ സ്ഥാപിച്ച്, കണ്ടെയ്നറിനുള്ളിലെ ട്രിഗറിന് മുകളിൽ സ്ഥാപിച്ച് ക്ലിപ്പ് മറച്ചിരിക്കുന്നു. ഷോയോംബോ ഗബ്രിയേൽ അയോമൈഡിൻ്റെ പെൻ സീനാരിയോ 3: ക്ലിപ്പുചെയ്ത ടൂൾടിപ്പ് (പരിഹാരം) [ഫോർക്ക്ഡ്] കാണുക. പാർശ്വഫലങ്ങളില്ലാതെ സ്റ്റാക്കിംഗ് സന്ദർഭം അവതരിപ്പിക്കുന്നു മുമ്പത്തെ വിഭാഗത്തിൽ വിശദീകരിച്ചിരിക്കുന്ന എല്ലാ സമീപനങ്ങളും പ്രശ്നമുള്ള സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങളിൽ നിന്നുള്ള ഘടകങ്ങൾ "അൺസ്റ്റാക്ക് ചെയ്യുക" എന്ന ലക്ഷ്യത്തോടെയുള്ളതാണ്, എന്നാൽ നിങ്ങൾക്ക് യഥാർത്ഥത്തിൽ ആവശ്യമുള്ളതോ അല്ലെങ്കിൽ ഒരു സ്റ്റാക്കിംഗ് സന്ദർഭം സൃഷ്ടിക്കാൻ ആഗ്രഹിക്കുന്നതോ ആയ ചില സാഹചര്യങ്ങളുണ്ട്. ഒരു പുതിയ സ്റ്റാക്കിംഗ് സന്ദർഭം സൃഷ്ടിക്കുന്നത് എളുപ്പമാണ്, എന്നാൽ എല്ലാ സമീപനങ്ങളും ഒരു പാർശ്വഫലത്തോടെയാണ് വരുന്നത്. അതായത്, ഐസൊലേഷൻ ഉപയോഗിക്കുന്നത് ഒഴികെ: ഒറ്റപ്പെടുത്തുക. ഒരു ഘടകത്തിൽ പ്രയോഗിക്കുമ്പോൾ, ആ മൂലകത്തിൻ്റെ കുട്ടികളുടെ സ്റ്റാക്കിംഗ് സന്ദർഭം, അതിന് പുറത്തുള്ള ഘടകങ്ങളാൽ സ്വാധീനിക്കപ്പെടുന്നതിനുപകരം, ഓരോ കുട്ടിയുമായും ആ സന്ദർഭത്തിനകത്തും ആപേക്ഷികമായി നിർണ്ണയിക്കപ്പെടുന്നു. z-ഇൻഡക്സ്: -1 പോലെയുള്ള ഒരു നെഗറ്റീവ് മൂല്യം ആ ഘടകത്തിന് നൽകുന്നത് ഒരു മികച്ച ഉദാഹരണമാണ്. നിങ്ങൾക്ക് ഒരു .card ഘടകം ഉണ്ടെന്ന് സങ്കൽപ്പിക്കുക. .കാർഡിൻ്റെ ടെക്സ്റ്റിന് പിന്നിൽ ഇരിക്കുന്ന ഒരു അലങ്കാര രൂപം ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു, എന്നാൽ കാർഡിൻ്റെ പശ്ചാത്തലത്തിന് മുകളിൽ. കാർഡിൽ ഒരു സ്റ്റാക്കിംഗ് സന്ദർഭം കൂടാതെ, z-ഇൻഡക്സ്: -1 ആകാരം റൂട്ട് സ്റ്റാക്കിംഗ് സന്ദർഭത്തിൻ്റെ (മുഴുവൻ പേജും) അടിയിലേക്ക് അയയ്ക്കുന്നു. ഇത് .കാർഡിൻ്റെ വെളുത്ത പശ്ചാത്തലത്തിന് പിന്നിൽ അപ്രത്യക്ഷമാക്കുന്നു: ഷോയോംബോ ഗബ്രിയേൽ അയോമൈഡിൻ്റെ പെൻ നെഗറ്റീവ് ഇസെഡ് സൂചിക (പ്രശ്നം) [ഫോർക്ക്ഡ്] കാണുക. ഇത് പരിഹരിക്കാൻ, ഞങ്ങൾ ഐസൊലേഷൻ പ്രഖ്യാപിക്കുന്നു: രക്ഷാകർതൃ .കാർഡിൽ ഒറ്റപ്പെടുത്തുക: ഷോയോംബോ ഗബ്രിയേൽ അയോമൈഡിൻ്റെ പെൻ നെഗറ്റീവ് ഇസെഡ് സൂചിക (പരിഹാരം) [ഫോർക്ക്ഡ്] കാണുക. ഇപ്പോൾ, .card ഘടകം തന്നെ ഒരു സ്റ്റാക്കിംഗ് സന്ദർഭമായി മാറുന്നു. അതിൻ്റെ ചൈൽഡ് എലമെൻ്റ് -: കപട മൂലകത്തിന് മുമ്പുള്ള അലങ്കാര രൂപത്തിന് - z- സൂചിക: -1 ഉള്ളപ്പോൾ, അത് മാതാപിതാക്കളുടെ സ്റ്റാക്കിംഗ് സന്ദർഭത്തിൻ്റെ ഏറ്റവും താഴെയായി പോകുന്നു. ഇത് ടെക്സ്റ്റിന് പിന്നിലും കാർഡിൻ്റെ പശ്ചാത്തലത്തിന് മുകളിലും, ഉദ്ദേശിച്ചത് പോലെ ഇരിക്കുന്നു. ഉപസംഹാരം ഓർക്കുക: അടുത്ത തവണ നിങ്ങളുടെ z-ഇൻഡക്സ് നിയന്ത്രണാതീതമാണെന്ന് തോന്നുമ്പോൾ, അത് കുടുങ്ങിയ സ്റ്റാക്കിംഗ് സന്ദർഭമാണ്. റഫറൻസുകൾ
സ്റ്റാക്കിംഗ് സന്ദർഭം (MDN) Z-ഇൻഡക്സും സ്റ്റാക്കിംഗ് സന്ദർഭങ്ങളും (web.dev) "സിഎസ്എസിലെ ഐസൊലേഷൻ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഒരു പുതിയ സ്റ്റാക്കിംഗ് സന്ദർഭം എങ്ങനെ സൃഷ്ടിക്കാം", നതാലി പിന “വാട്ട് ദി ഹെക്ക്, z-ഇൻഡക്സ്??”, ജോഷ് കോമോ
SmashingMag-നെക്കുറിച്ചുള്ള കൂടുതൽ വായന
"വലിയ പദ്ധതികളിൽ CSS Z-ഇൻഡക്സ് മാനേജിംഗ്", സ്റ്റീവൻ ഫ്രൈസൺ "സ്റ്റിക്കി ഹെഡറുകളും ഫുൾ-ഹെയ്റ്റ് ഘടകങ്ങളും: ഒരു ട്രിക്കി കോമ്പിനേഷൻ", ഫിലിപ്പ് ബ്രൗണൻ “ഘടകാധിഷ്ഠിത വെബ് ആപ്ലിക്കേഷനിൽ Z-ഇൻഡക്സ് നിയന്ത്രിക്കുന്നു”, പാവൽ പോമറാൻസെവ് "ഇസഡ്-ഇൻഡക്സ് CSS പ്രോപ്പർട്ടി: ഒരു സമഗ്ര രൂപം", ലൂയിസ് ലസാരിസ്
