விழுத்தொடர் நடைத்தாள்கள் கொண்ட கூறுகள் மேலெழுதும்
வலை பக்கம் அமைப்பை CSS நிலைப்படுத்தல் பயன்படுத்தும் போது சவால்களை ஒன்று உங்கள் உறுப்புகள் சில மற்ற ஒன்றுடன் ஒன்று இருக்கலாம். HTML இல் கடைசி உறுப்பு மேலே இருக்கும்போது இது நன்றாக வேலை செய்கிறது, ஆனால் நீங்கள் இதை செய்யவில்லை என்றால் என்ன செய்வது என்றால் என்னவென்றால், இந்த "layered" தோற்றத்திற்கான வடிவமைப்பு அழைப்பதால், மற்றவர்கள் மீளமைக்காத கூறுகளை இப்போது கொண்டிருக்க வேண்டும். ? வழி கூறுகளை மாற்ற பொருட்டு நீங்கள் CSS சொத்து பயன்படுத்த வேண்டும்.
நீங்கள் Word மற்றும் PowerPoint அல்லது Adobe Photoshop போன்ற வலுவான படத்தை எடிட்டரில் ஒரு கிராபிக்ஸ் கருவிகளைப் பயன்படுத்தியிருந்தால், நீங்கள் z-குறியீட்டுப் போக்கில் ஏதேனும் சந்தர்ப்பங்களைப் பார்த்திருப்பீர்கள். இந்த நிரல்களில், நீங்கள் வரையப்பட்ட பொருள் (கள்) ஐ நீங்கள் சிறப்பித்துக் காட்டலாம், மேலும் உங்கள் ஆவணத்தின் சில கூறுகளை "பின்னுக்கு அனுப்பு" அல்லது "முன் கொண்டு செல்" என்ற விருப்பத்தைத் தேர்வு செய்யலாம். ஃபோட்டோஷாப், நீங்கள் இந்த செயல்பாடுகளை கொண்டிருக்கவில்லை, ஆனால் நீங்கள் திட்டத்தின் "லேயர்" பேனலை வைத்திருக்கிறார்கள், இந்த அடுக்குகளை மீண்டும் வரிசைப்படுத்துவதன் மூலம் கேன்வாஸில் ஒரு உறுப்பு விழுந்தால் நீங்கள் ஏற்பாடு செய்யலாம். இந்த இரண்டு உதாரணங்கள், நீங்கள் அடிப்படையில் அந்த பொருட்களை z- குறியீட்டை அமைக்க.
Z- குறியீட்டு என்ன?
பக்கத்தில் உள்ள உறுப்புகளை நிலைப்படுத்த நீங்கள் CSS நிலையைப் பயன்படுத்தும் போது, நீங்கள் மூன்று பரிமாணங்களில் சிந்திக்க வேண்டும். இரண்டு நிலையான பரிமாணங்கள் உள்ளன: இடது / வலது மற்றும் மேல் / கீழ். வலது புறத்திற்கு இடப்புறம் x- குறியீடாக அறியப்படுகிறது, அதே நேரத்தில் மேல்-கீழ் ஒரு y-குறியீடாகும். இந்த இரு குறியீடுகளையும் பயன்படுத்தி, கிடைமட்டமாகவோ அல்லது செங்குத்தாகவோ கூறுகளை எடுப்பீர்கள்.
வலை வடிவமைப்புக்கு வரும் போது, பக்கத்தின் வரிசைப்படுத்துதல் வரிசையும் உள்ளது. பக்கத்தில் ஒவ்வொரு உறுப்பு மேலே அல்லது வேறு எந்த உறுப்பு கீழே அடுக்கு. ஸ்டாக்கிலுள்ள ஒவ்வொரு உறுப்புக்கும் எங்கே z- குறியீட்டு சொத்து தீர்மானிக்கிறது. X- குறியீட்டு மற்றும் y- குறியீடானது கிடைமட்ட மற்றும் செங்குத்து கோடுகள் எனில், z-index என்பது பக்கத்தின் ஆழம், முக்கியமாக 3 வது பரிமாணமாகும்.
காகிதத்தின் துண்டுகளாக ஒரு வலைப்பக்கத்தின் கூறுகளை நான் நினைக்கிறேன், வலைப்பக்கத்தை ஒரு கல்லூரி என நான் விரும்புகிறேன். நான் எங்கே போடுவது நிலைப்பாடு மூலம் தீர்மானிக்கப்படுகிறது, மற்றும் அது எவ்வளவு மற்ற உறுப்புகள் மூலம் மூடப்பட்டிருக்கும் z- குறியீட்டு உள்ளது.
Z- குறியீடானது ஒரு எண், நேர்மறை (எ.கா. 100) அல்லது எதிர்மறை (எ.கா. -100). இயல்புநிலை z- குறியீடானது 0 ஆகும். அதிக z- குறியீட்டுடன் கூடிய உறுப்பு மேலே உள்ளது, அடுத்தடுத்து மிக உயர்ந்த z- குறியீட்டிற்கு கீழே இருக்கும். இரண்டு உறுப்புகள் ஒரே z- குறியீட்டு மதிப்பு (அல்லது இது வரையறுக்கப்படவில்லை, அதாவது 0 இன் இயல்புநிலை மதிப்பைப் பயன்படுத்துதல்) இருந்தால், அவர்கள் HTML இல் தோன்றும் வரிசையில் உலாவி அவற்றை அடுக்குவார்கள்.
Z- குறியீட்டைப் பயன்படுத்துவது எப்படி
உங்கள் ஸ்டேக் வேறுபட்ட z- குறியீட்டு மதிப்பில் நீங்கள் விரும்பும் ஒவ்வொரு உறுப்பையும் கொடுக்கவும். உதாரணமாக, எனக்கு ஐந்து வெவ்வேறு கூறுகள் இருந்தால்:
- உறுப்பு 1 - -25 இன் z- குறியீட்டு
- உறுப்பு 2 - z- குறியீட்டு எண் 82
- உறுப்பு 3 - z- குறியீட்டு அமைக்கப்படவில்லை
- உறுப்பு 4 - 10 இன் z- குறியீடு
- உறுப்பு 5 - -3 இன் z- குறியீட்டு
அவர்கள் பின்வரும் வரிசையில் ஸ்டேக் செய்வர்:
- உறுப்பு 2
- உறுப்பு 4
- உறுப்பு 3
- உறுப்பு 5
- உறுப்பு 1
நான் உங்கள் உறுப்புகளை அடுக்க வேறுபட்ட z- குறியீட்டு மதிப்புகள் பயன்படுத்தி பரிந்துரைக்கிறேன். அந்த வழியில், பின்னர் பக்கத்திற்கு கூடுதல் உறுப்புகளை நீங்கள் சேர்த்தால், மற்ற உறுப்புகளின் z- குறியீட்டு மதிப்பினை சரிசெய்யாமல் அவற்றை அடுக்குவதற்கு அறை உள்ளது. உதாரணத்திற்கு:
- 100 என் மேல் மிக உறுப்பு
- என் நடுத்தர உறுப்பு 0
- -100 என் கீழ் உறுப்பு
நீங்கள் இரண்டு உறுப்புகள் அதே z- குறியீட்டு மதிப்பு கொடுக்க முடியும். இந்த உறுப்புகள் அடுக்கப்பட்டிருந்தால், அவை HTML இல் எழுதப்பட்ட வரிசையில், மேலே உள்ள கடைசி உறுப்புடன் காட்டப்படும்.
ஒரு குறிப்பு, z-குறியீட்டு சொத்துகளை திறம்பட பயன்படுத்தக்கூடிய ஒரு உறுப்புக்காக, இது ஒரு தொகுதி நிலை உறுப்பு அல்லது உங்கள் CSS கோப்பில் "தொகுதி" அல்லது "இன்லைன்-பிளாக்" ஒரு காட்சி பயன்படுத்த வேண்டும்.
ஜெனிபர் கிரைனின் அசல் கட்டுரை. 12/09/16 அன்று ஜெர்மி கிரிகாரால் திருத்தப்பட்டது.