តើអ្នកធ្លាប់កំណត់ z-index: 99999 នៅលើធាតុនៅក្នុង CSS របស់អ្នក ហើយវាមិនចេញមកនៅលើធាតុផ្សេងទៀតទេ? តម្លៃដែលធំគួរតែងាយស្រួលដាក់ធាតុនោះដោយមើលឃើញពីលើអ្វីផ្សេងទៀត ដោយសន្មតថាធាតុផ្សេងគ្នាទាំងអស់ត្រូវបានកំណត់នៅតម្លៃទាបជាង ឬមិនកំណត់ទាំងអស់។ គេហទំព័រមួយត្រូវបានតំណាងជាធម្មតាក្នុងចន្លោះពីរវិមាត្រ។ ទោះយ៉ាងណាក៏ដោយ តាមរយៈការអនុវត្តលក្ខណៈសម្បត្តិ CSS ជាក់លាក់ យន្តហោះអ័ក្ស z ស្រមើលស្រមៃត្រូវបានណែនាំដើម្បីបង្ហាញជម្រៅ។ យន្តហោះនេះគឺកាត់កែងទៅនឹងអេក្រង់ ហើយពីវា អ្នកប្រើប្រាស់យល់ឃើញលំដាប់នៃធាតុ ដែលមួយនៅពីលើមួយទៀត។ គំនិតនៅពីក្រោយអ័ក្ស z ដែលជាការយល់ឃើញរបស់អ្នកប្រើចំពោះធាតុជង់ គឺថាលក្ខណៈសម្បត្តិ CSS ដែលបង្កើតវាបញ្ចូលគ្នាដើម្បីបង្កើតជាអ្វីដែលយើងហៅថាបរិបទជង់។ យើងនឹងនិយាយអំពីរបៀបដែលធាតុត្រូវបាន "ជង់" លើគេហទំព័រ អ្វីដែលគ្រប់គ្រងលំដាប់ជង់ និងវិធីសាស្ត្រជាក់ស្តែងចំពោះធាតុ "មិនជង់" នៅពេលចាំបាច់។ អំពីបរិបទជង់ ស្រមៃមើលគេហទំព័ររបស់អ្នកជាតុមួយ។ នៅពេលអ្នកបន្ថែមធាតុ HTML អ្នកកំពុងដាក់ក្រដាសមួយបន្ទាប់ពីផ្សេងទៀតនៅលើតុ។ ក្រដាសចុងក្រោយដែលដាក់គឺស្មើនឹងធាតុ HTML ដែលបានបន្ថែមថ្មីៗបំផុត ហើយវាស្ថិតនៅពីលើក្រដាសផ្សេងទៀតទាំងអស់ដែលដាក់នៅពីមុខវា។ នេះជាលំហូរឯកសារធម្មតា សូម្បីតែសម្រាប់ធាតុដែលបានភ្ជាប់។ តុខ្លួនវាតំណាងឱ្យបរិបទជង់ឫស ដែលបង្កើតឡើងដោយធាតុ ដែលមានថតផ្សេងទៀតទាំងអស់។ ឥឡូវនេះ លក្ខណៈសម្បត្តិ CSS ជាក់លាក់ចូលមកលេង។ លក្ខណសម្បត្តិដូចជាទីតាំង (ជាមួយសន្ទស្សន៍ z) ភាពស្រអាប់ បំប្លែង និងផ្ទុក) ដើរតួដូចជាថតឯកសារ។ ថតឯកសារនេះយកធាតុមួយ និងកូនរបស់វាទាំងអស់ ទាញយកពួកវាចេញពីជង់មេ ហើយដាក់ជាក្រុមចូលទៅក្នុងជង់រងដាច់ដោយឡែក ដោយបង្កើតនូវអ្វីដែលយើងហៅថាបរិបទជង់។ សម្រាប់ធាតុដែលមានទីតាំង វាកើតឡើងនៅពេលយើងប្រកាសតម្លៃ z-index ផ្សេងក្រៅពីស្វ័យប្រវត្តិ។ សម្រាប់លក្ខណៈសម្បត្តិដូចជាភាពស្រអាប់ ការបំប្លែង និងតម្រង បរិបទជង់ត្រូវបានបង្កើតដោយស្វ័យប្រវត្តិ នៅពេលតម្លៃជាក់លាក់ត្រូវបានអនុវត្ត។
ព្យាយាមយល់ពីរឿងនេះ៖ នៅពេលដែលក្រដាសមួយ (ឧ. ធាតុកូន) នៅខាងក្នុងថតឯកសារ (ឧ. បរិបទជង់របស់មេ) វាមិនអាចចេញពីថតនោះ ឬដាក់នៅចន្លោះក្រដាសក្នុងថតផ្សេងបានទេ។ សន្ទស្សន៍ z របស់វាឥឡូវនេះពាក់ព័ន្ធតែនៅក្នុងថតឯកសាររបស់វាប៉ុណ្ណោះ។
នៅក្នុងរូបភាពខាងក្រោម ក្រដាស B ឥឡូវនេះស្ថិតនៅក្នុងបរិបទនៃការជង់នៃ Folder B ហើយអាចបញ្ជាបានតែជាមួយក្រដាសផ្សេងទៀតនៅក្នុងថតប៉ុណ្ណោះ។
ស្រមៃថាប្រសិនបើអ្នកចង់ អ្នកមានថតពីរនៅលើតុរបស់អ្នក៖
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
សូមធ្វើបច្ចុប្បន្នភាពការសម្គាល់បន្តិច។ Inside Folder A គឺជាទំព័រពិសេស z-index: 9999. Inside Folder B គឺជាទំព័រធម្មតា z-index: 5 ។
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
តើទំព័រមួយណានៅលើកំពូល? វាជា .plain-page នៅក្នុង Folder B. កម្មវិធីរុករកតាមអ៊ីនធឺណិតមិនអើពើនឹងឯកសារកុមារ ហើយជង់ថតទាំងពីរជាមុនសិន។ វាឃើញ Folder B (z-index: 2) ហើយដាក់វានៅលើកំពូលនៃ Folder A (z-index: 1) ព្រោះយើងដឹងថាពីរធំជាងមួយ។ ទន្ទឹមនឹងនេះ ទំព័រ .special-page ត្រូវបានកំណត់ទៅ z-index: 9999 ទំព័រគឺនៅខាងក្រោមនៃជង់ ទោះបីជាសន្ទស្សន៍ z របស់វាត្រូវបានកំណត់ទៅជាតម្លៃខ្ពស់បំផុតដែលអាចធ្វើបានក៏ដោយ។ ការដាក់ជង់បរិបទក៏អាចត្រូវបានដាក់ជាសំបុក (ថតនៅខាងក្នុងថត) បង្កើត "មែកធាងគ្រួសារ" ។ គោលការណ៍ដូចគ្នាត្រូវបានអនុវត្ត៖ កុមារមិនអាចគេចផុតពីថតឯកសារឪពុកម្តាយបានទេ។ ឥឡូវនេះ អ្នកទទួលបានពីរបៀបដែលបរិបទដាក់ជង់មានឥរិយាបទដូចជាថតដែលដាក់ជាក្រុម និងតម្រៀបស្រទាប់ឡើងវិញ វាមានតម្លៃសួរថា ហេតុអ្វីបានជាលក្ខណៈសម្បត្តិជាក់លាក់ - ដូចជាបំប្លែង និងភាពស្រអាប់ - បង្កើតបរិបទជង់ថ្មី? នេះគឺជារឿង៖ លក្ខណសម្បត្តិទាំងនេះមិនបង្កើតបរិបទជង់ទេ ដោយសាររូបរាងរបស់វា ពួកគេធ្វើវាដោយសារតែរបៀបដែលកម្មវិធីរុករកដំណើរការនៅក្រោមក្រណាត់។ នៅពេលអ្នកអនុវត្តការបំប្លែង ភាពស្រអាប់ តម្រង ឬទស្សនវិស័យ អ្នកកំពុងប្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតថា "ហេ ធាតុនេះអាចផ្លាស់ទី បង្វិល ឬបន្ថយ ដូច្នេះត្រៀមខ្លួនជាស្រេច!"
នៅពេលអ្នកប្រើលក្ខណៈសម្បត្តិទាំងនេះ កម្មវិធីរុករកនឹងបង្កើតបរិបទជង់ថ្មី ដើម្បីគ្រប់គ្រងការបង្ហាញឱ្យកាន់តែមានប្រសិទ្ធភាព។ នេះអនុញ្ញាតឱ្យកម្មវិធីរុករកគ្រប់គ្រងចលនា បំប្លែង និងបែបផែនមើលឃើញដោយឯករាជ្យ ដោយកាត់បន្ថយតម្រូវការក្នុងការគណនាឡើងវិញពីរបៀបដែលធាតុទាំងនេះធ្វើអន្តរកម្មជាមួយទំព័រដែលនៅសល់។ គិតថាវាដូចជាកម្មវិធីរុករកដែលនិយាយថា "ខ្ញុំនឹងដោះស្រាយថតនេះដោយឡែកពីគ្នា ដូច្នេះខ្ញុំមិនចាំបាច់រុះរើតុទាំងមូលរាល់ពេលមានអ្វីមួយនៅក្នុងវាផ្លាស់ប្តូរនោះទេ"។ ប៉ុន្តែមានផលប៉ះពាល់។ នៅពេលដែលកម្មវិធីរុករកលើកធាតុចូលទៅក្នុងស្រទាប់របស់វា វាត្រូវតែ "ធ្វើឱ្យ" អ្វីគ្រប់យ៉ាងនៅក្នុងវា បង្កើតបរិបទជង់ថ្មី។ វាដូចជាការយកថតចេញពីតុដើម្បីដោះស្រាយវាដាច់ដោយឡែក។ អ្វីគ្រប់យ៉ាងនៅក្នុងថតនោះត្រូវបានដាក់ជាក្រុម ហើយឥឡូវនេះកម្មវិធីរុករកបានចាត់ទុកវាជាឯកតាតែមួយ នៅពេលសម្រេចចិត្តថាអ្វីដែលស្ថិតនៅពីលើអ្វី។ ដូច្នេះ ទោះបីជាលក្ខណៈសម្បត្តិបំប្លែង និងភាពស្រអាប់អាចហាក់ដូចជាមិនប៉ះពាល់ដល់របៀបដែលធាតុជង់ដោយមើលឃើញក៏ដោយ ពួកវាធ្វើបាន ហើយវាគឺសម្រាប់ការបង្កើនប្រសិទ្ធភាពប្រតិបត្តិការ។ លក្ខណៈសម្បត្តិ CSS ជាច្រើនផ្សេងទៀតក៏អាចបង្កើតបរិបទជង់សម្រាប់ហេតុផលស្រដៀងគ្នានេះផងដែរ។ MDN ផ្តល់បញ្ជីពេញលេញប្រសិនបើអ្នកចង់ជីកជ្រៅ។ មានមួយចំនួនតូច ដែលគ្រាន់តែបង្ហាញពីភាពងាយស្រួលក្នុងការបង្កើតបរិបទជង់ដោយចៃដន្យដោយមិនដឹងខ្លួន។ បញ្ហា "ការបិទភ្ជាប់" បញ្ហាជង់អាចកើតឡើងដោយហេតុផលជាច្រើន ប៉ុន្តែបញ្ហាខ្លះមានច្រើនជាងរឿងផ្សេងទៀត។ សមាសធាតុម៉ូឌុលគឺជាគំរូបុរាណ ព្រោះវាតម្រូវឱ្យបិទ/បើកសមាសភាគដើម្បី "បើក" នៅលើស្រទាប់ខាងលើពីលើធាតុផ្សេងទៀតទាំងអស់ បន្ទាប់មកយកវាចេញពីស្រទាប់ខាងលើនៅពេលដែលវា "បិទ"។ ខ្ញុំមានទំនុកចិត្តយ៉ាងខ្លាំងថា យើងទាំងអស់គ្នាបានរត់ចូលទៅក្នុងស្ថានភាពមួយដែលយើងបើកម៉ូឌុល ហើយ ទោះជាមានហេតុផលណាក៏ដោយ វាមិនលេចចេញមកឡើយ។ វាមិនមែនថាវាមិនបើកបានត្រឹមត្រូវទេ ប៉ុន្តែវាមើលមិនឃើញនៅក្នុងស្រទាប់ខាងក្រោមនៃបរិបទជង់។ នេះធ្វើឱ្យអ្នកឆ្ងល់ថា "តើបានមកដោយរបៀបណា?" ចាប់តាំងពីអ្នកកំណត់:
.ត្រួតលើគ្នា { ទីតាំង: ថេរ; /* បង្កើតបរិបទជង់ */ z-index: 1; /* ដាក់ធាតុនៅលើស្រទាប់ខាងលើអ្វីៗផ្សេងទៀត */ បញ្ចូល: 0; ទទឹង: 100%; កម្ពស់: 100vh; overflow: លាក់; ពណ៌ផ្ទៃខាងក្រោយ៖ #00000080; }
វាមើលទៅត្រឹមត្រូវ ប៉ុន្តែប្រសិនបើធាតុមេដែលមានគន្លឹះម៉ូឌុលគឺជាធាតុកូននៅក្នុងធាតុមេផ្សេងទៀតដែលត្រូវបានកំណត់ផងដែរ z-index: 1 ដែលបច្ចេកទេសដាក់ម៉ូឌុលនៅក្នុងស្រទាប់រងដែលបិទបាំងដោយថតមេ។ សូមក្រឡេកមើលសេណារីយ៉ូជាក់លាក់នោះ និងឧប្បត្តិហេតុនៃបរិបទជង់ធម្មតាមួយចំនួនទៀត។ ខ្ញុំគិតថា អ្នកនឹងឃើញមិនត្រឹមតែភាពងាយស្រួលក្នុងការបង្កើតបរិបទជង់ដោយអចេតនាប៉ុណ្ណោះទេ ប៉ុន្តែក៏មានរបៀបគ្រប់គ្រងវាខុសដែរ។ ផងដែរ របៀបដែលអ្នកត្រលប់ទៅរដ្ឋដែលបានគ្រប់គ្រងគឺអាស្រ័យលើស្ថានភាព។ សេណារីយ៉ូទី 1៖ គំរូជាប់
អ្នកអាចមើលឃើញម៉ូឌុលរបស់អ្នកជាប់នៅក្នុងស្រទាប់កម្រិតទាបភ្លាមៗ ហើយកំណត់អត្តសញ្ញាណមេ។ ផ្នែកបន្ថែមកម្មវិធីរុករក អ្នកអភិវឌ្ឍន៍ឆ្លាតវៃបានបង្កើតផ្នែកបន្ថែមដើម្បីជួយ។ ឧបករណ៍ដូចជា "CSS Stacking Context Inspector" ផ្នែកបន្ថែម Chrome បន្ថែមផ្ទាំង z-index បន្ថែមទៅ DevTools របស់អ្នក ដើម្បីបង្ហាញអ្នកនូវព័ត៌មានអំពីធាតុដែលបង្កើតបរិបទជង់។
ផ្នែកបន្ថែម IDE អ្នកថែមទាំងអាចរកឃើញបញ្ហាកំឡុងពេលអភិវឌ្ឍជាមួយនឹងផ្នែកបន្ថែមដូចនេះសម្រាប់ VS Code ដែលបង្ហាញពីបញ្ហាដែលមានសក្តានុពលក្នុងការជង់ដោយផ្ទាល់នៅក្នុងកម្មវិធីនិពន្ធរបស់អ្នក។
ការដកនិងការគ្រប់គ្រងឡើងវិញ បន្ទាប់ពីយើងបានកំណត់មូលហេតុឫសគល់ហើយ ជំហានបន្ទាប់គឺត្រូវដោះស្រាយវា។ មានវិធីសាស្រ្តជាច្រើនដែលអ្នកអាចអនុវត្តដើម្បីដោះស្រាយបញ្ហានេះ ហើយខ្ញុំនឹងរាយបញ្ជីពួកវាតាមលំដាប់លំដោយ។ អ្នកអាចជ្រើសរើសនរណាម្នាក់នៅកម្រិតណាមួយទោះបីជា; គ្មាននរណាម្នាក់អាចតវ៉ា ឬរារាំងអ្នកដទៃបានទេ។ ផ្លាស់ប្តូររចនាសម្ព័ន្ធ HTML នេះត្រូវបានចាត់ទុកថាជាការជួសជុលដ៏ល្អប្រសើរ។ សម្រាប់អ្នកដើម្បីរត់ចូលទៅក្នុងបញ្ហាបរិបទជង់ អ្នកត្រូវតែបានដាក់ធាតុមួយចំនួននៅក្នុងមុខតំណែងគួរឱ្យអស់សំណើចនៅក្នុង HTML របស់អ្នក។ ការរៀបចំរចនាសម្ព័ន្ធទំព័រឡើងវិញនឹងជួយអ្នកឱ្យផ្លាស់ប្តូរទម្រង់ DOM និងលុបបំបាត់បញ្ហាបរិបទជង់។ ស្វែងរកធាតុដែលមានបញ្ហា ហើយយកវាចេញពីធាតុអន្ទាក់នៅក្នុង HTML markup ។ ជាឧទាហរណ៍ យើងអាចដោះស្រាយសេណារីយ៉ូទីមួយ "The Trapped Modal" ដោយផ្លាស់ទី .modal-container ចេញពីបឋមកថា ហើយដាក់វានៅក្នុងធាតុ
ដោយខ្លួនឯង។មាតិកានេះមានសន្ទស្សន៍ z នៃ 2 ហើយនឹងនៅតែមិនគ្របដណ្តប់ម៉ូឌុល។បឋមកថា
ខ្លឹមសារចម្បង
នៅពេលអ្នកចុចប៊ូតុង "បើកម៉ូឌុល" ម៉ូឌុលត្រូវបានដាក់នៅពីមុខអ្វីៗផ្សេងទៀតដូចដែលវាត្រូវបានសន្មត់ថាជា។ សូមមើល Pen Scenario 1: The Trapped Modal (ដំណោះស្រាយ) [forked] ដោយ Shoyombo Gabriel Ayomide។ លៃតម្រូវបរិបទជង់មាតាបិតានៅក្នុង CSS ចុះបើធាតុជាធាតុមួយដែលអ្នកមិនអាចផ្លាស់ទីដោយមិនបំបែកប្លង់? វាជាការប្រសើរក្នុងការដោះស្រាយបញ្ហា៖ មាតាបិតាបង្កើតបរិបទ។ ស្វែងរកលក្ខណសម្បត្តិ CSS (ឬលក្ខណៈសម្បត្តិ) ដែលទទួលខុសត្រូវចំពោះការកេះបរិបទ ហើយលុបវាចេញ។ ប្រសិនបើវាមានគោលបំណង និងមិនអាចដកចេញបានទេ សូមផ្តល់ឱ្យមេនូវតម្លៃសន្ទស្សន៍ z ខ្ពស់ជាងធាតុបងប្អូនរបស់វា ដើម្បីលើកកុងតឺន័រទាំងមូល។ ជាមួយនឹងតម្លៃសន្ទស្សន៍ z ខ្ពស់ កុងតឺន័រមេផ្លាស់ទីទៅកំពូល ហើយកូនៗរបស់វាលេចឡើងកាន់តែជិតអ្នកប្រើប្រាស់។ ដោយផ្អែកលើអ្វីដែលយើងបានរៀននៅក្នុងសេណារីយ៉ូ "ការទម្លាក់ចុះក្រោមទឹក" យើងមិនអាចផ្លាស់ទីទម្លាក់ចុះចេញពីរបាររុករកបានទេ។ វានឹងមិនសមហេតុផលទេ។ ទោះយ៉ាងណាក៏ដោយ យើងអាចបង្កើនតម្លៃសន្ទស្សន៍ z នៃកុងតឺន័រ .navbar ឱ្យធំជាងតម្លៃសន្ទស្សន៍ z របស់ធាតុ .content ។ .navbar { ផ្ទៃខាងក្រោយ៖ #333; /* z-index: 1; */ z-index: 3; ទីតាំង: សាច់ញាតិ; }
ជាមួយនឹងការផ្លាស់ប្តូរនេះ ឥឡូវនេះ .dropdown-menu លេចឡើងនៅពីមុខមាតិកាដោយគ្មានបញ្ហាអ្វីទាំងអស់។
សូមមើល Pen Scenario 2: The Submerged Dropdown (Solution) [forked] ដោយ Shoyombo Gabriel Ayomide។
សាកល្បង Portals ប្រសិនបើប្រើ Framework
នៅក្នុងក្របខ័ណ្ឌដូចជា React ឬ Vue វិបផតថលគឺជាលក្ខណៈពិសេសដែលអនុញ្ញាតឱ្យអ្នកបង្ហាញសមាសធាតុនៅខាងក្រៅឋានានុក្រមមេធម្មតារបស់វានៅក្នុង DOM ។ វិបផតថលគឺដូចជាឧបករណ៍ teleportation សម្រាប់សមាសធាតុរបស់អ្នក។ ពួកគេអនុញ្ញាតឱ្យអ្នកបង្ហាញ HTML របស់សមាសធាតុនៅកន្លែងណាមួយនៅក្នុងឯកសារ (ជាធម្មតាចូលទៅក្នុង document.body) ខណៈពេលដែលរក្សាវាឱ្យជាប់ទាក់ទងគ្នាយ៉ាងឡូជីខលទៅមេដើមរបស់វាសម្រាប់ props ស្ថានភាព និងព្រឹត្តិការណ៍។ នេះគឺល្អឥតខ្ចោះសម្រាប់ការគេចចេញពីអន្ទាក់បរិបទជង់ចាប់តាំងពីលទ្ធផលដែលបានបង្ហាញបង្ហាញជាន័យត្រង់នៅខាងក្រៅធុងមេដែលមានបញ្ហា។
ReactDOM.createPortal(
នេះធានាថាខ្លឹមសារទម្លាក់ចុះរបស់អ្នកមិនត្រូវបានលាក់នៅពីក្រោយមេរបស់វាទេ ទោះបីជាមេមានផ្ទុកលើសចំណុះក៏ដោយ៖ លាក់ ឬសន្ទស្សន៍ z ទាបជាង។ នៅក្នុងសេណារីយ៉ូ "ព័ត៌មានជំនួយដែលបានខ្ទាស់" ដែលយើងមើលនៅមុននេះ ខ្ញុំបានប្រើវិបផតថល ដើម្បីសង្គ្រោះព័ត៌មានជំនួយពីការហូរហៀរ៖ ឈុតដែលលាក់ដោយដាក់វានៅក្នុងតួឯកសារ ហើយដាក់វានៅពីលើគន្លឹះនៅក្នុងកុងតឺន័រ។ សូមមើល Pen Scenario 3: The Clipped Tooltip (Solution) [forked] ដោយ Shoyombo Gabriel Ayomide។ ការណែនាំអំពីការជង់បរិបទដោយគ្មានផលប៉ះពាល់ វិធីសាស្រ្តទាំងអស់ដែលបានពន្យល់នៅក្នុងផ្នែកមុនគឺសំដៅទៅលើធាតុ "មិនជង់" ពីបរិបទជង់ដែលមានបញ្ហា ប៉ុន្តែមានស្ថានភាពមួយចំនួនដែលអ្នកពិតជាត្រូវការ ឬចង់បង្កើតបរិបទជង់។ ការបង្កើតបរិបទជង់ថ្មីគឺងាយស្រួល ប៉ុន្តែវិធីសាស្រ្តទាំងអស់មកជាមួយផលប៉ះពាល់។ នោះគឺលើកលែងតែការប្រើឯកោ៖ ឯកោ។ នៅពេលអនុវត្តចំពោះធាតុមួយ បរិបទជង់នៃកូនរបស់ធាតុនោះត្រូវបានកំណត់ទាក់ទងនឹងកូននីមួយៗ និងក្នុងបរិបទនោះ ជាជាងឥទ្ធិពលដោយធាតុនៅខាងក្រៅរបស់វា។ ឧទាហរណ៍បុរាណមួយកំពុងកំណត់ធាតុនោះជាតម្លៃអវិជ្ជមាន ដូចជា z-index: -1 ។ ស្រមៃថាអ្នកមានសមាសធាតុ .card ។ អ្នកចង់បន្ថែមរូបរាងតុបតែងដែលស្ថិតនៅខាងក្រោយអត្ថបទរបស់ .card ប៉ុន្តែនៅផ្នែកខាងលើនៃផ្ទៃខាងក្រោយរបស់កាត។ បើគ្មានបរិបទជង់លើកាតទេ z-index: -1 ផ្ញើរូបរាងទៅបាតនៃបរិបទជង់ឫស (ទំព័រទាំងមូល)។ វាធ្វើឱ្យវាបាត់នៅពីក្រោយផ្ទៃខាងក្រោយពណ៌សរបស់ .card៖ សូមមើល Pen Negative z-index (problem) [forked] ដោយ Shoyombo Gabriel Ayomide។ ដើម្បីដោះស្រាយបញ្ហានេះ យើងប្រកាសឯកោ៖ ឯកោនៅលើមេ .card: សូមមើល Pen Negative z-index (ដំណោះស្រាយ) [forked] ដោយ Shoyombo Gabriel Ayomide។ ឥឡូវនេះ ធាតុ .card ខ្លួនវាក្លាយជាបរិបទជង់។ នៅពេលដែលធាតុកូនរបស់វា — រូបរាងតុបតែងដែលបានបង្កើតនៅលើ :before pseudo-element — មាន z-index: -1 វាទៅខាងក្រោមបំផុតនៃបរិបទជង់របស់មេ។ វាអង្គុយយ៉ាងល្អឥតខ្ចោះនៅពីក្រោយអត្ថបទ និងនៅលើផ្ទៃខាងក្រោយនៃកាត ដូចដែលបានគ្រោងទុក។ សេចក្តីសន្និដ្ឋាន ចងចាំ៖ នៅពេលបន្ទាប់សន្ទស្សន៍ z របស់អ្នកហាក់ដូចជាមិនអាចគ្រប់គ្រងបាន វាគឺជាបរិបទជង់ជាប់។ ឯកសារយោង
បរិបទជង់ (MDN) សន្ទស្សន៍ Z និងបរិបទជង់ (web.dev) "របៀបបង្កើតបរិបទជង់ថ្មីជាមួយនឹងទ្រព្យសម្បត្តិឯកោនៅក្នុង CSS", Natalie Pina "What The Heck, z-index?", Josh Comeau
ការអានបន្ថែមនៅលើ SmashingMag
"ការគ្រប់គ្រង CSS Z-Index នៅក្នុងគម្រោងធំ", Steven Frieson "ក្បាលស្អិតនិងធាតុកម្ពស់ពេញ: ការរួមបញ្ចូលគ្នាដ៏លំបាក", Philip Braunen "ការគ្រប់គ្រងសន្ទស្សន៍ Z នៅក្នុងកម្មវិធីបណ្តាញផ្អែកលើសមាសធាតុ" លោក Pavel Pomerantsev "ទ្រព្យសម្បត្តិ CSS លិបិក្រម Z: រូបរាងដ៏ទូលំទូលាយ", Louis Lazaris
