In This Article

நீங்கள் எப்போதாவது உங்கள் CSS இல் உள்ள ஒரு உறுப்பில் z-index: 99999 ஐ அமைத்திருக்கிறீர்களா, அது மற்ற உறுப்புகளுக்கு மேல் வரவில்லையா? அனைத்து வெவ்வேறு கூறுகளும் குறைந்த மதிப்பில் அமைக்கப்பட்டுள்ளன அல்லது அமைக்கப்படவில்லை எனக் கருதினால், பெரிய மதிப்பு, அந்த உறுப்பை வேறு எதற்கும் மேல் பார்வைக்கு வைக்க வேண்டும். ஒரு வலைப்பக்கம் பொதுவாக இரு பரிமாண இடைவெளியில் குறிப்பிடப்படுகிறது; இருப்பினும், குறிப்பிட்ட CSS பண்புகளைப் பயன்படுத்துவதன் மூலம், ஒரு கற்பனையான z-அச்சு விமானம் ஆழத்தை வெளிப்படுத்த அறிமுகப்படுத்தப்பட்டது. இந்த விமானம் திரைக்கு செங்குத்தாக உள்ளது, மேலும் அதிலிருந்து, பயனர் உறுப்புகளின் வரிசையை ஒன்றன் மேல் ஒன்றாக உணர்கிறார். கற்பனையான z- அச்சுக்குப் பின்னால் உள்ள யோசனை, அடுக்கப்பட்ட உறுப்புகள் பற்றிய பயனரின் கருத்து, அதை உருவாக்கும் CSS பண்புகள் ஒன்றிணைந்து நாம் ஸ்டாக்கிங் சூழல் என்று அழைக்கிறோம். ஒரு வலைப்பக்கத்தில் கூறுகள் எவ்வாறு "அடுக்கப்பட்டுள்ளன", ஸ்டேக்கிங் வரிசையை எது கட்டுப்படுத்துகிறது மற்றும் தேவைப்படும் போது உறுப்புகளை "அன்ஸ்டாக்" செய்வதற்கான நடைமுறை அணுகுமுறைகள் பற்றி நாங்கள் பேசப் போகிறோம். சூழல்களை அடுக்கி வைப்பது பற்றி உங்கள் வலைப்பக்கத்தை ஒரு மேசையாக கற்பனை செய்து பாருங்கள். நீங்கள் HTML கூறுகளைச் சேர்க்கும்போது, ​​நீங்கள் காகிதத் துண்டுகளை ஒன்றன் பின் ஒன்றாக மேசையில் வைக்கிறீர்கள். கடைசியாக வைக்கப்பட்ட காகிதத் துண்டு, மிக சமீபத்தில் சேர்க்கப்பட்ட HTML உறுப்புக்கு சமமானதாகும், மேலும் அது அதற்கு முன் வைக்கப்பட்டுள்ள மற்ற எல்லா பேப்பர்களின் மேல் அமர்ந்திருக்கும். உள்ளமைக்கப்பட்ட உறுப்புகளுக்கு கூட இது சாதாரண ஆவண ஓட்டம். மற்ற எல்லா கோப்புறைகளையும் கொண்ட உறுப்பால் உருவாக்கப்பட்ட ரூட் ஸ்டேக்கிங் சூழலை மேசையே குறிக்கிறது. இப்போது, ​​குறிப்பிட்ட CSS பண்புகள் செயல்பாட்டுக்கு வருகின்றன. நிலை (z-இண்டெக்ஸ் உடன்), ஒளிபுகாநிலை, உருமாற்றம் மற்றும் கொண்டவை போன்ற பண்புகள் ஒரு கோப்புறையைப் போல் செயல்படும். இந்தக் கோப்புறை ஒரு உறுப்பு மற்றும் அதன் அனைத்து குழந்தைகளையும் எடுத்து, அவற்றை பிரதான அடுக்கிலிருந்து பிரித்தெடுத்து, அவற்றை ஒரு தனி துணை அடுக்காகக் குழுவாக்கி, நாம் ஸ்டேக்கிங் சூழல் என்று அழைக்கிறோம். நிலைப்படுத்தப்பட்ட உறுப்புகளுக்கு, ஆட்டோவைத் தவிர வேறு z-இண்டெக்ஸ் மதிப்பை அறிவிக்கும்போது இது நடக்கும். ஒளிபுகாநிலை, உருமாற்றம் மற்றும் வடிகட்டி போன்ற பண்புகளுக்கு, குறிப்பிட்ட மதிப்புகள் பயன்படுத்தப்படும்போது, ​​அடுக்கி வைக்கும் சூழல் தானாகவே உருவாக்கப்படும்.

இதைப் புரிந்துகொள்ள முயலவும்: ஒரு கோப்புறைக்குள் (அதாவது, பெற்றோரின் ஸ்டாக்கிங் சூழல்) காகிதத் துண்டு (அதாவது, குழந்தை உறுப்பு) இருந்தால், அது அந்தக் கோப்புறையிலிருந்து வெளியேறவோ அல்லது வேறு கோப்புறையில் உள்ள காகிதங்களுக்கு இடையில் வைக்கவோ முடியாது. அதன் z-இன்டெக்ஸ் இப்போது அதன் சொந்த கோப்புறையில் மட்டுமே தொடர்புடையது.

கீழே உள்ள விளக்கப்படத்தில், தாள் B இப்போது கோப்புறை B இன் ஸ்டாக்கிங் சூழலில் உள்ளது, மேலும் கோப்புறையில் உள்ள மற்ற காகிதங்களுடன் மட்டுமே ஆர்டர் செய்ய முடியும்.

நீங்கள் விரும்பினால், உங்கள் மேசையில் இரண்டு கோப்புறைகள் இருப்பதாக கற்பனை செய்து பாருங்கள்:

.folder-a {z-index: 1; } .folder-b {z-index: 2; }

மார்க்அப்பை சிறிது புதுப்பிப்போம். கோப்புறையின் உள்ளே A என்பது ஒரு சிறப்புப் பக்கம், z-index: 9999. Folder B என்பது ஒரு எளிய பக்கம், z-index: 5.

.special-page {z-index: 9999; } .plain-page {z-index: 5; }

எந்தப் பக்கம் மேலே உள்ளது? இது கோப்புறை B இல் உள்ள .plain-பக்கம். உலாவி குழந்தை ஆவணங்களைப் புறக்கணித்து இரண்டு கோப்புறைகளை முதலில் அடுக்கி வைக்கிறது. இது கோப்புறை B (z-index: 2) ஐப் பார்க்கிறது மற்றும் அதை A (z-index: 1) கோப்புறையின் மேல் வைக்கிறது, ஏனெனில் ஒன்றை விட இரண்டு பெரியது என்பதை நாம் அறிவோம். இதற்கிடையில், .special-page set to z-index: 9999 பக்கம் அதன் z-இன்டெக்ஸ் அதிகபட்ச சாத்தியமான மதிப்பிற்கு அமைக்கப்பட்டிருந்தாலும், அடுக்கின் கீழே உள்ளது. ஸ்டேக்கிங் சூழல்களும் கூடுகளாக அமைக்கப்படலாம் (கோப்புறைகளுக்குள் உள்ள கோப்புறைகள்), "குடும்ப மரத்தை" உருவாக்குகிறது. அதே கொள்கை பொருந்தும்: ஒரு குழந்தை தனது பெற்றோரின் கோப்புறையிலிருந்து தப்பிக்க முடியாது. அடுக்குகளைக் குழுவாக்கி மறுவரிசைப்படுத்தும் கோப்புறைகளைப் போல அடுக்கி வைக்கும் சூழல்கள் எவ்வாறு செயல்படுகின்றன என்பதை இப்போது நீங்கள் தெரிந்துகொண்டால், கேட்க வேண்டியது: சில பண்புகள் - உருமாற்றம் மற்றும் ஒளிபுகாநிலை போன்றவை - ஏன் புதிய அடுக்குச் சூழல்களை உருவாக்குகின்றன? இங்கே விஷயம் இதுதான்: இந்த பண்புகள் எப்படி இருக்கும் என்பதன் காரணமாக அடுக்கி வைக்கும் சூழல்களை உருவாக்கவில்லை; உலாவியின் கீழ் எவ்வாறு செயல்படுகிறது என்பதன் காரணமாக அவர்கள் அதைச் செய்கிறார்கள். உருமாற்றம், ஒளிபுகாநிலை, வடிகட்டி அல்லது முன்னோக்கைப் பயன்படுத்தும்போது, ​​“ஏய், இந்த உறுப்பு நகரலாம், சுழலலாம் அல்லது மங்கலாம், எனவே தயாராக இருங்கள்!” என்று உலாவியிடம் கூறுகிறீர்கள்.

இந்த பண்புகளை நீங்கள் பயன்படுத்தும் போது, ​​ரெண்டரிங்கை மிகவும் திறமையாக நிர்வகிக்க உலாவி புதிய ஸ்டேக்கிங் சூழலை உருவாக்குகிறது. இது அனிமேஷன்கள், உருமாற்றங்கள் மற்றும் காட்சி விளைவுகளைச் சுதந்திரமாக கையாள உலாவியை அனுமதிக்கிறது, இந்த கூறுகள் பக்கத்தின் மற்ற பகுதிகளுடன் எவ்வாறு தொடர்பு கொள்கின்றன என்பதை மீண்டும் கணக்கிட வேண்டிய அவசியத்தை குறைக்கிறது. "இந்தக் கோப்புறையை நான் தனித்தனியாகக் கையாள்வேன், அதனால் ஒவ்வொரு முறையும் அதன் உள்ளே ஏதாவது மாறும்போது நான் முழு மேசையையும் மறுசீரமைக்க வேண்டியதில்லை" என்று உலாவி கூறுவதைப் போல நினைத்துப் பாருங்கள். ஆனால் இருக்கிறதுஒரு பக்க விளைவு. உலாவி அதன் சொந்த அடுக்கில் ஒரு உறுப்பை உயர்த்தியதும், அது அதனுள் உள்ள அனைத்தையும் "தட்டையாக்க வேண்டும்", ஒரு புதிய அடுக்கு சூழலை உருவாக்குகிறது. இது தனித்தனியாக கையாள ஒரு கோப்புறையை மேசையில் இருந்து எடுப்பது போன்றது; அந்த கோப்புறையில் உள்ள அனைத்தும் தொகுக்கப்படும், மேலும் உலாவி இப்போது அதை ஒரு யூனிட்டாக கருதுகிறது. எனவே, உருமாற்றம் மற்றும் ஒளிபுகா பண்புகள் உறுப்புகள் பார்வைக்கு அடுக்கி வைக்கும் விதத்தை பாதிக்கவில்லை என்றாலும், அவை செயல்படுகின்றன, மேலும் இது செயல்திறன் மேம்படுத்தலுக்கானது. இதே போன்ற காரணங்களுக்காக பல பிற CSS பண்புகள் அடுக்கி வைக்கும் சூழல்களை உருவாக்கலாம். நீங்கள் ஆழமாக தோண்ட விரும்பினால் MDN முழுமையான பட்டியலை வழங்குகிறது. சில உள்ளன, இது தெரியாமல் ஒரு அடுக்கி வைக்கும் சூழலை கவனக்குறைவாக உருவாக்குவது எவ்வளவு எளிது என்பதை மட்டுமே விளக்குகிறது. "அன்ஸ்டாக்கிங்" பிரச்சனை ஸ்டாக்கிங் சிக்கல்கள் பல காரணங்களுக்காக எழலாம், ஆனால் சில மற்றவர்களை விட மிகவும் பொதுவானவை. மாதிரி கூறுகள் ஒரு உன்னதமான வடிவமாகும், ஏனென்றால் மற்ற எல்லா உறுப்புகளுக்கும் மேலாக மேல் அடுக்கில் "திறக்க" கூறுகளை மாற்ற வேண்டும், பின்னர் "மூடப்படும்" போது மேல் அடுக்கிலிருந்து அதை அகற்ற வேண்டும். நாம் அனைவரும் ஒரு மாதிரியைத் திறக்கும் சூழ்நிலையில் ஓடிவிட்டோம், எந்த காரணத்திற்காகவும் அது தோன்றாது என்பதில் நான் மிகவும் நம்பிக்கையுடன் இருக்கிறேன். இது சரியாக திறக்கப்படவில்லை என்பதல்ல, ஆனால் ஸ்டேக்கிங் சூழலின் கீழ் அடுக்கில் பார்வைக்கு வெளியே உள்ளது. இது "எப்படி வந்தது?" நீங்கள் அமைத்ததிலிருந்து:

.மேலே { நிலை: நிலையான; /* ஸ்டாக்கிங் சூழலை உருவாக்குகிறது */ z-குறியீடு: 1; /* எல்லாவற்றிற்கும் மேலாக ஒரு அடுக்கில் உறுப்பை வைக்கிறது */ உள்ளீடு: 0; அகலம்: 100%; உயரம்: 100vh; வழிதல்: மறைக்கப்பட்ட; பின்னணி நிறம்: #00000080; }

இது சரியாகத் தெரிகிறது, ஆனால் மாதிரி தூண்டுதலைக் கொண்ட மூல உறுப்பு மற்றொரு மூல உறுப்புக்குள் இருக்கும் குழந்தை உறுப்பாக இருந்தால், அது z-index: 1 க்கு அமைக்கப்பட்டுள்ளது, இது தொழில்நுட்ப ரீதியாக முக்கிய கோப்புறையால் மறைக்கப்பட்ட சப்லேயரில் மோடலை வைக்கிறது. அந்த குறிப்பிட்ட சூழ்நிலையையும் மற்ற பொதுவான ஸ்டாக்கிங்-சூழல் ஆபத்துக்களையும் பார்க்கலாம். கவனக்குறைவாக அடுக்கி வைக்கும் சூழல்களை உருவாக்குவது எவ்வளவு எளிது என்பதை மட்டுமின்றி, அவற்றை எவ்வாறு தவறாக நிர்வகிப்பது என்பதையும் நீங்கள் பார்ப்பீர்கள் என்று நினைக்கிறேன். மேலும், நீங்கள் எவ்வாறு நிர்வகிக்கப்பட்ட நிலைக்குத் திரும்புகிறீர்கள் என்பது நிலைமையைப் பொறுத்தது. காட்சி 1: சிக்கிய மாதிரி

உங்கள் மாடல் ஒரு குறைந்த-நிலை அடுக்கில் சிக்கியிருப்பதை நீங்கள் உடனடியாகக் காணலாம் மற்றும் பெற்றோரை அடையாளம் காணலாம். உலாவி நீட்டிப்புகள் ஸ்மார்ட் டெவலப்பர்கள் உதவ நீட்டிப்புகளை உருவாக்கியுள்ளனர். "CSS ஸ்டேக்கிங் சூழல் ஆய்வாளர்" Chrome நீட்டிப்பு போன்ற கருவிகள், ஸ்டாக்கிங் சூழலை உருவாக்கும் கூறுகள் பற்றிய தகவலை உங்களுக்குக் காண்பிக்க உங்கள் DevTools இல் கூடுதல் z-இண்டெக்ஸ் தாவலைச் சேர்க்கிறது.

IDE நீட்டிப்புகள் VS குறியீட்டிற்கான இது போன்ற நீட்டிப்பு மூலம் வளர்ச்சியின் போது கூட நீங்கள் சிக்கல்களைக் கண்டறியலாம், இது உங்கள் எடிட்டரில் நேரடியாக ஸ்டேக்கிங் சூழல் சிக்கல்களை எடுத்துக்காட்டுகிறது.

அன்ஸ்டாக்கிங் மற்றும் கட்டுப்பாட்டை மீண்டும் பெறுதல் மூல காரணத்தை நாங்கள் கண்டறிந்த பிறகு, அதைச் சமாளிப்பது அடுத்த படியாகும். இந்த சிக்கலைச் சமாளிக்க நீங்கள் எடுக்கக்கூடிய பல அணுகுமுறைகள் உள்ளன, அவற்றை நான் வரிசையில் பட்டியலிடுகிறேன். நீங்கள் எந்த மட்டத்திலும் யாரையும் தேர்வு செய்யலாம். யாராலும் புகார் செய்யவோ அல்லது மற்றொருவரை தடுக்கவோ முடியாது. HTML கட்டமைப்பை மாற்றவும் இது உகந்த தீர்வாக கருதப்படுகிறது. நீங்கள் ஸ்டேக்கிங் சூழல் சிக்கலை எதிர்கொள்ள, உங்கள் HTML இல் சில கூறுகளை வேடிக்கையான நிலைகளில் வைத்திருக்க வேண்டும். பக்கத்தை மறுசீரமைப்பது DOM ஐ மறுவடிவமைக்கவும் மற்றும் அடுக்கி வைக்கும் சூழல் சிக்கலை நீக்கவும் உதவும். பிரச்சனைக்குரிய உறுப்பைக் கண்டறிந்து, HTML மார்க்அப்பில் உள்ள பொறி உறுப்பிலிருந்து அதை அகற்றவும். உதாரணமாக, .modal-container ஐ ஹெடரில் இருந்து நகர்த்தி, அதை உறுப்புக்குள் வைப்பதன் மூலம், "The Trapped Modal" என்ற முதல் காட்சியை நாம் தீர்க்கலாம்.

<தலைப்பு வகுப்பு="தலைப்பு">

தலைப்பு

"திறந்த மாதிரி" பொத்தானைக் கிளிக் செய்யும் போது, மாதிரியானது எல்லாவற்றுக்கும் முன்னால் இருக்கும். ஷோயம்போ கேப்ரியல் அயோமைடு எழுதிய பென் காட்சி 1: தி ட்ராப்ட் மாடல் (தீர்வு) [ஃபோர்க்டு] பார்க்கவும். சரிசெய்யவும்CSS இல் பெற்றோர் அடுக்கி வைக்கும் சூழல் உறுப்பாக இருந்தால், அமைப்பை உடைக்காமல் நீங்கள் நகர்த்த முடியாது? சிக்கலைத் தீர்ப்பது நல்லது: பெற்றோர் சூழலை நிறுவுகிறார். சூழலைத் தூண்டுவதற்குப் பொறுப்பான CSS சொத்தை (அல்லது பண்புகள்) கண்டறிந்து அதை அகற்றவும். அதற்கு ஒரு நோக்கம் இருந்தால் மற்றும் அதை அகற்ற முடியாவிட்டால், முழு கொள்கலனையும் உயர்த்த அதன் உடன்பிறப்பு கூறுகளை விட பெற்றோருக்கு அதிக z-இண்டெக்ஸ் மதிப்பை வழங்கவும். அதிக z-இண்டெக்ஸ் மதிப்புடன், பெற்றோர் கொள்கலன் மேலே நகர்கிறது, மேலும் அதன் குழந்தைகள் பயனருக்கு நெருக்கமாகத் தோன்றும். "தி சப்மெர்டு டிராப் டவுன்" சூழ்நிலையில் நாங்கள் கற்றுக்கொண்டவற்றின் அடிப்படையில், கீழ்தோன்றலை நாவ்பாரிலிருந்து வெளியே நகர்த்த முடியாது; அது அர்த்தமுள்ளதாக இருக்காது. இருப்பினும், .navbar கண்டெய்னரின் z-இண்டெக்ஸ் மதிப்பை .content உறுப்புகளின் z-index மதிப்பை விட அதிகமாக அதிகரிக்கலாம். .navbar { பின்னணி: #333; /* z-index: 1; */ z-இண்டெக்ஸ்: 3; நிலை: உறவினர்; }

இந்த மாற்றத்துடன், .dropdown-menu இப்போது எந்த பிரச்சனையும் இல்லாமல் உள்ளடக்கத்தின் முன் தோன்றும். ஷோயம்போ கேப்ரியல் அயோமைடு எழுதிய பென் காட்சி 2: நீரில் மூழ்கிய கீழ்தோன்றும் (தீர்வு) [ஃபோர்க் செய்யப்பட்ட] பார்க்கவும். ஒரு கட்டமைப்பைப் பயன்படுத்தினால், போர்ட்டல்களை முயற்சிக்கவும் ரியாக்ட் அல்லது வியூ போன்ற கட்டமைப்பில், போர்ட்டல் என்பது ஒரு அம்சமாகும், இது DOM இல் அதன் இயல்பான பெற்றோர் படிநிலைக்கு வெளியே ஒரு கூறுகளை வழங்க உங்களை அனுமதிக்கிறது. போர்ட்டல்கள் உங்கள் கூறுகளுக்கான டெலிபோர்ட்டேஷன் சாதனம் போன்றவை. ஒரு கூறுகளின் HTML ஐ ஆவணத்தில் எங்கும் (பொதுவாக document.body க்குள்) வழங்க அனுமதிக்கின்றன, அதே நேரத்தில் அதை அதன் அசல் பெற்றோருடன் முட்டுகள், நிலை மற்றும் நிகழ்வுகளுக்கு தர்க்கரீதியாக இணைக்கிறது. ஸ்டேக்கிங் சூழல் பொறிகளில் இருந்து தப்பிப்பதற்கு இது சரியானது, ஏனெனில் ரெண்டர் செய்யப்பட்ட வெளியீடு பிரச்சனைக்குரிய பெற்றோர் கண்டெய்னருக்கு வெளியே தோன்றும். ReactDOM.createPortal( , ஆவணம்.உடல் );

இது, உங்கள் கீழ்தோன்றும் உள்ளடக்கம் அதன் பெற்றோருக்குப் பின்னால் மறைக்கப்படாமல் இருப்பதை உறுதிசெய்கிறது: மறைந்திருந்தாலும் அல்லது குறைந்த z-இண்டெக்ஸ். நாம் முன்பு பார்த்த "The Clipped Tooltip" சூழ்நிலையில், நான் டூல்டிப்பை வழிந்தோடுவதில் இருந்து மீட்க ஒரு போர்ட்டலைப் பயன்படுத்தினேன்: மறைக்கப்பட்ட கிளிப்பை ஆவணப் பகுதியில் வைத்து, கன்டெய்னருக்குள் தூண்டுதலுக்கு மேலே நிலைநிறுத்துவதன் மூலம். ஷோயம்போ கேப்ரியல் அயோமைடு எழுதிய பென் காட்சி 3: கிளிப்டு டூல்டிப் (தீர்வு) [ஃபோர்க்டு] பார்க்கவும். பக்க விளைவுகள் இல்லாமல் ஸ்டேக்கிங் சூழலை அறிமுகப்படுத்துகிறது முந்தைய பிரிவில் விளக்கப்பட்டுள்ள அனைத்து அணுகுமுறைகளும் சிக்கலான அடுக்கி வைக்கும் சூழல்களில் இருந்து கூறுகளை "அன்ஸ்டாக்கிங்" செய்வதை நோக்கமாகக் கொண்டுள்ளன, ஆனால் சில சூழ்நிலைகள் உங்களுக்கு உண்மையில் தேவைப்படும் அல்லது ஸ்டாக்கிங் சூழலை உருவாக்க விரும்புகின்றன. புதிய ஸ்டேக்கிங் சூழலை உருவாக்குவது எளிதானது, ஆனால் எல்லா அணுகுமுறைகளும் பக்க விளைவுகளுடன் வருகின்றன. அதாவது, தனிமைப்படுத்தலைப் பயன்படுத்துவதைத் தவிர: தனிமைப்படுத்தல். ஒரு தனிமத்திற்குப் பயன்படுத்தப்படும்போது, ​​அந்த உறுப்பின் குழந்தைகளின் அடுக்கி வைக்கும் சூழல், அதற்கு வெளியே உள்ள கூறுகளால் பாதிக்கப்படாமல், ஒவ்வொரு குழந்தைக்கும் அந்தச் சூழலுக்குள்ளேயே தீர்மானிக்கப்படுகிறது. ஒரு உன்னதமான உதாரணம், அந்த உறுப்புக்கு z-index: -1 போன்ற எதிர்மறை மதிப்பை வழங்குவது. உங்களிடம் .card பாகம் இருப்பதாக கற்பனை செய்து பாருங்கள். .கார்டின் உரைக்குப் பின்னால் இருக்கும் அலங்கார வடிவத்தைச் சேர்க்க விரும்புகிறீர்கள், ஆனால் கார்டின் பின்புலத்தின் மேல். அட்டையில் ஸ்டாக்கிங் சூழல் இல்லாமல், z-index: -1 ரூட் ஸ்டேக்கிங் சூழலின் (முழு பக்கமும்) வடிவத்தை கீழே அனுப்புகிறது. இது .கார்டின் வெள்ளை பின்னணியில் மறைந்துவிடும்: ஷோயம்போ கேப்ரியல் அயோமைடு எழுதிய பென் நெகட்டிவ் z-இண்டெக்ஸ் (சிக்கல்) [ஃபோர்க்டு] பார்க்கவும். இதைத் தீர்க்க, நாங்கள் தனிமைப்படுத்தலை அறிவிக்கிறோம்: பெற்றோர் .கார்டில் தனிமைப்படுத்தவும்: ஷோயம்போ கேப்ரியல் அயோமைடு எழுதிய பென் நெகட்டிவ் z-இண்டெக்ஸ் (தீர்வு) [ஃபோர்க்டு] பார்க்கவும். இப்போது, ​​.card உறுப்பு தானே ஒரு அடுக்கி வைக்கும் சூழலாக மாறுகிறது. அதன் குழந்தை உறுப்பு -: போலி உறுப்புக்கு முன் உருவாக்கப்பட்ட அலங்கார வடிவம் - z-குறியீட்டைக் கொண்டிருக்கும் போது: -1, அது பெற்றோரின் ஸ்டாக்கிங் சூழலின் அடிப்பகுதிக்கு செல்கிறது. இது உரைக்குப் பின்னால் மற்றும் அட்டையின் பின்னணியின் மேல் சரியாக அமர்ந்திருக்கிறது. முடிவுரை நினைவில் கொள்ளுங்கள்: அடுத்த முறை உங்கள் z-இண்டெக்ஸ் கட்டுப்பாட்டை மீறியதாகத் தோன்றினால், அது சிக்கிய ஸ்டேக்கிங் சூழலாகும். குறிப்புகள்

ஸ்டேக்கிங் சூழல் (MDN) Z-இண்டெக்ஸ் மற்றும் ஸ்டேக்கிங் சூழல்கள் (web.dev) "சிஎஸ்எஸ்ஸில் தனிமைப்படுத்தப்பட்ட சொத்துடன் ஒரு புதிய அடுக்கி வைக்கும் சூழலை உருவாக்குவது எப்படி", நடாலி பினா "வாட் தி ஹெக், z-இன்டெக்ஸ்??", ஜோஷ் கோமேவ்

SmashingMag இல் மேலும் படிக்கவும்

"பெரிய திட்டங்களில் CSS Z-இண்டெக்ஸை நிர்வகித்தல்", ஸ்டீவன் ஃப்ரைசன் "ஒட்டும் தலைப்புகள் மற்றும் முழு உயர கூறுகள்: ஒரு தந்திரமான சேர்க்கை", பிலிப் பிரவுனென் “கூறு அடிப்படையிலான இணையப் பயன்பாட்டில் Z-இண்டெக்ஸை நிர்வகித்தல்”, பாவெல் பொமரன்செவ் "இசட்-இண்டெக்ஸ் CSS சொத்து: ஒரு விரிவான தோற்றம்", லூயிஸ் லாசரிஸ்

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw