කැස්කැඩින් ස්ටයිල් ෂීට් සහිත ස්ථානගත කිරීමේ අතිරික්ත මූලද්රව්ය
වෙබ් පිටු පිරිසැලසුම සඳහා CSS ස්ථානගත කිරීමේදී ඇතිවන අභියෝගය වන්නේ ඔබගේ සමහර අංග අනෙක් අයව අනපේක්ෂිත විය හැකිය. HTML හි අන්තිම අංගය ඔබට ඉහළින් තිබිය යුතු වුවද මෙය ක්රියාකරයි හොත්, ඔබ නොකරනවා නම් හෝ අන්යෝන්ය වශයෙන් අනිකුත් නොපවතින අංගයන් ඔබට අවශ්ය වන්නේ නම්, මෙම "ස්ථරයේ" පෙනුම සඳහා අවශ්ය වන පරිදි ? මූලද්රව්ය අතිච්ඡාදනය වන ආකාරය වෙනස් කිරීම සඳහා CSS වල දේපල භාවිතා කිරීමට අවශ්ය වේ.
ඔබ වර්ඩ් සහ පවර්පොයින්ට් හි චිත්රක මෙවලම් හෝ Adobe Photoshop වැනි ශක්තිමත් තිරපිටපත් සංස්කාරකයෙක් නම්, ඔබ ක්රියාකාරී z-index වැනි යමක් දැක ඇති. මෙම වැඩසටහන් වලදී ඔබ විසින් ඇද ගන්නා ලද වස්තුව (s) උද්දීපනය කළ හැකි අතර, ඔබගේ ලේඛනයේ ඇතැම් අංගයන් "Back to Back" හෝ "Front to Bring" යන්න තෝරාගන්න. Photoshop හි ඔබට මෙම කාර්යයන් නොමැත, නමුත් ඔබට වැඩසටහනේ "ලේයර්" කවුළුව ඇති අතර ඔබට මෙම ස්ථරයන් ප්රතිනිර්මාණය කිරීමෙන් කැන්වැල්ලක ඇලමකට වැටෙන ස්ථානයක් පිළියෙල කළ හැකිය. මෙම උදාහරණ දෙකෙහිම, ඔබ සැබවින්ම එම වස්තුවල z-දර්ශකය සකසා ඇත.
Z-index යනු කුමක්ද?
ඔබ CSS ස්ථානගත කිරීම භාවිතා කරන විට එම පිටුවෙහි අංගයන් ස්ථානගත කිරීම සඳහා, ඔබ මාන කළ යුතුවේ. සම්මත පමිති දෙකක් ඇත: වම් / දකුණු සහ ඉහළ / පහළ. වමේ සිට දකුණේ දර්ශකය x-index ලෙස හඳුන්වනු ලැබේ, ඉහළ සිට පහතින් එකක් වන y-index වේ. මෙම දර්ශක දෙක යොදා ගනිමින් ඔබට හරස් අතට හෝ සිරස් අතට හරිනු ඇත.
වෙබ් නිර්මාණය සඳහා පැමිණෙන විට, පිටුවෙහි සිරස් අනුපිළිවෙලද ඇත. පිටුවෙහි සෑම අංගයක්ම වෙනත් මූලද්රව්යයකට වඩා පහළින් හෝ ඊට පහළින් සැකසීමට හැකිය. Z-index දේපල එක් එක් මූලද්රව්යයේ කොතැනද යන්න තීරණය කරයි. X-index සහ y-index යනු තිරස් සහ සිරස් රේඛා නම්, z-index යනු පිටුවෙහි ගැඹුර වේ, සාරභූත වශයෙන් 3 වන මානය.
වෙබ් අඩවියේ කඩදාසි කැබලි ලෙසත්, වෙබ් පිටුවත් එය කොලඩයක් ලෙස සිතීමට මා කැමතියි. මම ලියන්නේ කොතැනද? ස්ථානගත කිරීම මගින් තීරණය කරනු ලබන අතර අනෙක් මූලද්රව්යවලින් එය කොපමණ ප්රමාණයක් ආවරණය වේ. Z-index.
Z-index යනු අංකයක් වන අතර, ධන (උදා: 100) හෝ ඍණ (උදා: -100) වේ. ප්රකෘති z-දර්ශකය වන්නේ 0. ඉහළම z-දර්ශකය සහිත මූලද්රව්යය ඉහළින් ඇති අතර ඊලඟ ඉහළම අගය හා පහළම z-දර්ශකය දක්වා පහළට. මූලද්රව්ය දෙකක එකම z-index අගයක් තිබේ නම් (නැතහොත් එය අර්ථ දැක්වෙන්නේ නැතිනම්, 0 හි පෙරනිමි අගය භාවිතා කිරීම) බ්රවුසරය HTML හි දිස්වන අනුපිළිවෙලෙහි ඒවා ස්ථර කර ගනී.
Z-index භාවිතා කරන්නේ කෙසේද
ඔබේ ඇසුරුමේ එක් එක් මූලද්රව්යය වෙනස් z-index අගයක් ලබා දෙන්න. උදාහරණයක් ලෙස, මට වෙනස් මූලද්රව්ය පහක් තිබේ නම්:
- මූලද්රව්ය 1 - z-index -25
- මූලද්රව්යය 2 - z-index of 82
- මූලද්රව්යය 3 - z-index එක නියම කර නැත
- මූලද්රව්යය 4 - z-index of 10
- මූලද්රව්යය 5 - z-index -3
පහත දැක්වෙන අනුපිළිවෙලින් ඔවුන් මිල දී ගනු ඇත:
- මූලද්රව්යය 2
- මූලද්රව්යය 4
- මූලද්රව්යය 3
- මූලද්රව්යය 5
- මූලද්රව්යය 1
ඔබේ මූලද්රව්යවලට ගැළපෙන ලෙස බොහෝ වෙනස් z-index අගයන් භාවිතා කිරීම නිර්දේශ කරමි. එසේ කිරීමෙන්, ඔබ පසුව තවත් පිටුවක් එකතු කර ඇත්නම්, අනෙකුත් මූලද්රව්යයන්ගේ z-දර්ශ අගයන් වෙනස් කිරීමකින් තොරව ඒවාට ඒවාට තට්ටු කිරීමට ඉඩ තිබේ. උදාහරණයක් වශයෙන්:
- මගේ ප්රධානතම අංගය සඳහා 100 ක්
- 0 මගේ මැද කොටස සඳහා
- මගේ පහළ කොටස සඳහා -100
මූලද්රව්ය දෙකකට එකම z-index අගයක් ලබා දිය හැකිය. මෙම මූලද්රව්ය එකමත වී තිබේ නම්, ඔවුන් විසින් HTML හි ලියා ඇති අනුපිළිවෙලෙහි පෙන්වනු ඇත, අවසානයේ අවසන් අංගය සමඟ.
එක් සටහනක්, z-index ගුණාංගය සඳහා ඵලදායී ලෙස භාවිතා කිරීම සඳහා, එය බ්ලොක් මට්ටමේ අංගයක් විය යුතුය හෝ ඔබගේ CSS ගොනුව තුල "බ්ලොක්" හෝ "inline-block" විදහා දැක්වීමක් භාවිතා කරන්න.
ජෙනිෆර් ක්රිනින්ගේ මුල් ලිපියක්. 12/09/16 සංස්කරණය කරන ලද්දේ ජෙරමි ගිරාඩ් විසිනි.