സിഎസിലെ Z- ഇന്ഡക്സ്

ഘടകങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിച്ച് ഓവർലാപ്പ് ചെയ്യുന്ന എലമെന്റുകൾ

വെബ് പേജ് ലേഔട്ടിനായി CSS പൊസിഷനിംഗ് ഉപയോഗിക്കുമ്പോൾ ഉണ്ടാകുന്ന വെല്ലുവിളികളിൽ ഒന്ന്, നിങ്ങളുടെ ചില ഘടകങ്ങൾ മറ്റുള്ളവയെ മറികടക്കുമെന്നതാണ്. ഇത് HTML ൽ അവസാനത്തെ എന്റർമെന്റ് ആണെങ്കിൽ ഇത് നന്നായി പ്രവർത്തിക്കുന്നു, എന്നാൽ നിങ്ങൾക്കിഷ്ടമല്ലെങ്കിൽ അല്ലെങ്കിൽ നിങ്ങൾക്ക് എന്തുചെയ്യാൻ കഴിയും എന്നു മറ്റുള്ളവർക്ക് കൂടി പൊരുത്തപ്പെടാത്ത ഇല്ലാത്തവ എന്തെങ്കിലുമുണ്ടെങ്കിൽ ഡിസൈൻ ഈ "ലെയറഡ്" ലുക്ക് ? മൂലകങ്ങൾ ഓവർലാപ്പുചെയ്യുന്നതിനായി, നിങ്ങൾ CSS ന്റെ സ്വത്തവകാശം ഉപയോഗിക്കേണ്ടതുണ്ട്.

നിങ്ങൾ Word, PowerPoint അല്ലെങ്കിൽ Adobe Photoshop പോലുള്ള റോബസ്റ്റ് ഇമേജ് എഡിറ്റർ എന്നിവയിൽ ഒരു ഗ്രാഫിക്സ് ഉപകരണങ്ങൾ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ പ്രവർത്തനത്തിൽ z- ഇൻഡെക്സ് പോലുള്ള ചില സാധ്യത കാണുന്നു. ഈ പ്രോഗ്രാമുകളിൽ, നിങ്ങൾ വരച്ച ഒബ്ജക്റ്റ് (കള്) ഹൈലൈറ്റ് ചെയ്യാനും നിങ്ങളുടെ പ്രമാണത്തിലെ ചില ഘടകങ്ങളെ "പിന്നിലേയ്ക്ക് അയയ്ക്കുക" അല്ലെങ്കില് "മുന്നിലേക്ക് കൊണ്ടുവരുക" എന്ന ഓപ്ഷന് തിരഞ്ഞെടുക്കാം. ഫോട്ടോഷോപ്പിൽ, നിങ്ങൾക്ക് ഈ ഫംഗ്ഷനുകൾ ഇല്ല, എന്നാൽ പ്രോഗ്രാമിന്റെ "ലേയർ" പാളി നിങ്ങളുടെ കൈവശമുണ്ട്, ഈ പാളികളെ വീണ്ടും ക്രമീകരിച്ചുകൊണ്ട് ഒരു ഘടകം ക്യാൻവാസ് താഴ്ത്തുമ്പോൾ നിങ്ങൾക്ക് ക്രമീകരിക്കാം. ഈ രണ്ട് ഉദാഹരണങ്ങളിലും, നിങ്ങൾ തീർച്ചയായും ആ വസ്തുക്കളുടെ z- ഇൻഡെക്സ് സജ്ജമാക്കുന്നു.

Z- ഇൻഡെക്സ് എന്താണ്?

പേജിൽ എലമെൻറുകൾ സ്ഥാപിക്കാൻ നിങ്ങൾ CSS പൊസിഷനിങ് ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ മൂന്ന് അളവുകൾ ചിന്തിക്കണം. രണ്ട് സ്റ്റാൻഡേർഡ് അളവുകൾ ഉണ്ട്: ഇടത് / വലത്, മുകളിൽ / താഴെ. ഇടതു നിന്നും വലതുവശത്തെ സൂചികയെ x- സൂചിക എന്ന് വിളിക്കുന്നു, മുകളിൽ നിന്ന് താഴെ ഒരു y- സൂചികയാണ്. ഈ രണ്ടു ഇൻഡെക്സുകളും ഉപയോഗിച്ച് നിങ്ങൾ തിരശ്ചീനമായി അല്ലെങ്കിൽ ലംബമായി മൂലകങ്ങൾ എങ്ങനെയാണ് സ്ഥാനംകൊള്ളുന്നത്.

വെബ് ഡിസൈനിലേക്ക് വരുന്ന സമയത്ത്, പേജിന്റെ സ്റ്റാക്കിങ്ങ് ഓർഡർ ഉണ്ട്. പേജിലെ ഓരോ എലവും മുകളിൽ മറ്റെവിടെയെങ്കിലുമോ ലേബലിനകത്തോ ആയിരിക്കും. സ്റ്റാക്ക് എവിടെ ഓരോ ഘടകവും ആണ് z-index വസ്തുത നിശ്ചയിക്കുന്നത്. X- ഇൻഡെക്സും y- ഇൻഡെക്സും തിരശ്ചീനവും ലംബവുമായ വരികളാണെങ്കിൽ z-index എന്നത് ആ പേജിന്റെ ആഴം, അത് തീർച്ചയായും 3rd dimension ആണ്.

ഒരു വെബ് പേജിലെ പേപ്പർ കഷണം, വെബ് പേജ് എന്നിവ ഒരു കൊളാഷ് ആയി മനസിലാക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. എവിടെയാണ് ഞാൻ പേപ്പറിന്റെ സ്ഥാനം നിർണ്ണയിക്കുന്നത് എന്ന് തീരുമാനിക്കുന്നത്, അത് മറ്റ് മൂലകങ്ങളാൽ എത്രത്തോളം സ്രോതസ്സാകുന്നു എന്നത് z- സൂചികയാണ്.

Z- ഇൻഡെക്സ് ഒരു അനുകൂലനമാണ് (ഉദാ: 100) അല്ലെങ്കിൽ നെഗറ്റീവ് (ഉദാ -100). സഹജമായ ജി-ഇന്ഡക്സ് 0 ആണ്. ഏറ്റവും വലിയ z- ഇന്ഡക്സ് ഉള്ള എലമെന്റിന് മുകളിലായി, തൊട്ടടുത്തുള്ള z- ഇന്ഡെക്സിനു താഴെയായിരിക്കും. രണ്ട് ഘടകങ്ങൾക്ക് ഒരേ z- ഇൻഡെക്സ് മൂല്യം (അല്ലെങ്കിൽ അത് നിർവചിക്കപ്പെട്ടിട്ടില്ല, അർത്ഥമാക്കുന്നത് 0 ന്റെ സ്ഥിരസ്ഥിതി മൂല്യം എന്നാണ്) അവർ HTML ൽ ദൃശ്യമാകുന്ന ക്രമത്തിൽ ബ്രൗസർ ലേയറു ചെയ്യും.

Z- സൂചിക ഉപയോഗിക്കുന്നതെങ്ങനെ

നിങ്ങളുടെ സ്റ്റാക്കിൽ നിങ്ങൾക്ക് ആവശ്യമുള്ള ഓരോ ഘടകവും ഒരു വ്യത്യസ്ത Z- ഇൻഡെക്സ് മൂല്യം നൽകുക. ഉദാഹരണത്തിന്, എനിക്ക് അഞ്ച് വ്യത്യസ്ത ഘടകങ്ങൾ ഉണ്ടെങ്കിൽ:

• ഘടകം 1 - -25 ന്റെ z- സൂചിക
• മൂലകത്തിന്റെ 2 - z- സൂചിക 82 ആണ്
• ഘടകം 3 - z- സൂചിക സജ്ജമാക്കിയില്ല
• ഘടകത്തിന്റെ 4 - 10 ന്റെ z- സൂചിക
• element 5 - -3 ന്റെ z- സൂചിക

അവർ താഴെ പറയുന്ന ക്രമത്തിൽ ചെയ്യും:

1. ഘടകം 2
2. മൂലകം 4
3. ഘടകം 3
4. ഘടകം 5
5. മൂലകം 1

നിങ്ങളുടെ ഘടകങ്ങൾ സ്റ്റാക്കുചെയ്യാൻ വളരെയധികം വ്യത്യസ്തമായ z- ഇൻഡെക്സ് മൂല്യങ്ങൾ ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു. അങ്ങനെയാണെങ്കിൽ, നിങ്ങൾ പിന്നീട് പേജിൽ കൂടുതൽ ഘടകങ്ങൾ ചേർക്കുന്നെങ്കിൽ, മറ്റ് എല്ലാ ഘടകങ്ങളുടെയും z- ഇൻഡെക്സ് മൂല്യങ്ങൾ ക്രമീകരിക്കാതെ അവയെ ലേയറിലേക്ക് സജ്ജീകരിക്കാം. ഉദാഹരണത്തിന്:

• 100 എന്റെ ഏറ്റവും കൂടുതൽ മൂലകക്ഷത്തിനായി
• എന്റെ മധ്യ മൂലകത്തിനായുള്ള 0
• -100 എന്റെ താഴെയുള്ള മൂലകക്ഷിക്കായി

നിങ്ങൾക്ക് രണ്ട് ഘടകങ്ങൾ ഒരേ സൂ-ഇൻ മൂല്യം നൽകാം. ഈ മൂലകങ്ങൾ അടുക്കുന്നതിന്റെ ഫലമായി മുകളിൽ പറഞ്ഞ മൂലകത്തിൽ എച്ച്ടിഎംഎലിൽ അവ എഴുതപ്പെട്ട ക്രമത്തിൽ പ്രദർശിപ്പിക്കും.

ഒരു കുറിപ്പ്, z-സൂചകം പ്രോപ്പർട്ടി ഉപയോഗിക്കാൻ ഫലപ്രദമായ ഒരു മൂലകം, ഒരു ബ്ളോക്ക് ലെവൽ ഘടകം ആയിരിക്കണം അല്ലെങ്കിൽ നിങ്ങളുടെ CSS ഫയലിൽ "ബ്ലോക്ക്" അല്ലെങ്കിൽ "ഇൻലൈൻ ബ്ലോക്ക്" ഒരു പ്രദർശനം ഉപയോഗിക്കുക.

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം 12/09/16 ന് ജെറമി ഗിരാർഡ് എഡിറ്റ് ചെയ്തത്.