In This Article

ທ່ານເຄີຍຕັ້ງ z-index: 99999 ໃນອົງປະກອບໃນ CSS ຂອງທ່ານ, ແລະມັນບໍ່ໄດ້ອອກມາຢູ່ເທິງສຸດຂອງອົງປະກອບອື່ນໆບໍ? ຄ່າທີ່ໃຫຍ່ຄວນວາງອົງປະກອບນັ້ນຢ່າງງ່າຍດາຍຢູ່ເທິງສຸດຂອງສິ່ງອື່ນ, ໂດຍສົມມຸດວ່າອົງປະກອບທີ່ແຕກຕ່າງກັນທັງໝົດຖືກຕັ້ງເປັນຄ່າຕໍ່າກວ່າ ຫຼື ບໍ່ໄດ້ຕັ້ງທັງໝົດ. ຫນ້າເວັບມັກຈະສະແດງຢູ່ໃນພື້ນທີ່ສອງມິຕິ; ຢ່າງໃດກໍຕາມ, ໂດຍການນໍາໃຊ້ຄຸນສົມບັດ CSS ສະເພາະ, ຍົນແກນ z ຈິນຕະນາການໄດ້ຖືກນໍາສະເຫນີເພື່ອຖ່າຍທອດຄວາມເລິກ. ຍົນນີ້ແມ່ນ perpendicular ກັບຫນ້າຈໍ, ແລະຈາກມັນ, ຜູ້ໃຊ້ຮັບຮູ້ຄໍາສັ່ງຂອງອົງປະກອບ, ຫນຶ່ງຢູ່ເທິງສຸດຂອງອື່ນໆ. ຄວາມຄິດທີ່ຢູ່ເບື້ອງຫລັງຂອງແກນ z ຈິນຕະນາການ, ຄວາມຮັບຮູ້ຂອງຜູ້ໃຊ້ກ່ຽວກັບອົງປະກອບ stacked, ແມ່ນວ່າຄຸນສົມບັດ CSS ທີ່ສ້າງມັນປະສົມປະສານກັບສິ່ງທີ່ພວກເຮົາເອີ້ນວ່າສະພາບການ stacking. ພວກເຮົາຈະສົນທະນາກ່ຽວກັບວິທີການອົງປະກອບ "ວາງຊ້ອນກັນ" ໃນຫນ້າເວັບ, ສິ່ງທີ່ຄວບຄຸມຄໍາສັ່ງ stacking, ແລະວິທີການປະຕິບັດເພື່ອ "unstack" ອົງປະກອບໃນເວລາທີ່ຈໍາເປັນ. ກ່ຽວ​ກັບ Stacking Contexts ຈິນຕະນາການຫນ້າເວັບຂອງເຈົ້າເປັນໂຕະ. ໃນຂະນະທີ່ທ່ານເພີ່ມອົງປະກອບ HTML, ທ່ານກໍາລັງວາງເຈ້ຍ, ຫນຶ່ງຫຼັງຈາກນັ້ນ, ຢູ່ເທິງໂຕະ. ເອກະສານສຸດທ້າຍທີ່ວາງໄວ້ແມ່ນທຽບເທົ່າກັບອົງປະກອບ HTML ທີ່ເພີ່ມໃຫມ່ຫຼ້າສຸດ, ແລະມັນຢູ່ເທິງສຸດຂອງເອກະສານອື່ນໆທັງຫມົດທີ່ວາງໄວ້ກ່ອນມັນ. ນີ້ແມ່ນການໄຫຼເຂົ້າເອກະສານປົກກະຕິ, ເຖິງແມ່ນວ່າສໍາລັບອົງປະກອບທີ່ຊ້ອນກັນ. ໂຕ໊ະຕົວມັນເອງເປັນຕົວແທນຂອງເນື້ອໃນ stacking ຮາກ, ສ້າງຕັ້ງຂຶ້ນໂດຍອົງປະກອບ , ເຊິ່ງປະກອບດ້ວຍໂຟນເດີອື່ນໆທັງຫມົດ. ດຽວນີ້, ຄຸນສົມບັດ CSS ສະເພາະເຂົ້າມາຫຼິ້ນ. ຄຸນສົມບັດເຊັ່ນ: ຕໍາແຫນ່ງ (ມີ z-index), ຄວາມໂປ່ງໃສ, ການຫັນປ່ຽນ, ແລະບັນຈຸ) ປະຕິບັດຄືກັບໂຟນເດີ. ໂຟນເດີນີ້ໃຊ້ເວລາອົງປະກອບຫນຶ່ງແລະທັງຫມົດຂອງລູກຂອງມັນ, ສະກັດພວກເຂົາອອກຈາກ stack ຕົ້ນຕໍ, ແລະຈັດກຸ່ມໃຫ້ເຂົາເຈົ້າເຂົ້າໄປໃນ stack ຍ່ອຍແຍກຕ່າງຫາກ, ສ້າງສິ່ງທີ່ພວກເຮົາເອີ້ນວ່າສະພາບການ stacking. ສໍາລັບອົງປະກອບຕໍາແຫນ່ງ, ນີ້ເກີດຂຶ້ນເມື່ອພວກເຮົາປະກາດຄ່າ z-index ອື່ນທີ່ບໍ່ແມ່ນອັດຕະໂນມັດ. ສໍາລັບຄຸນສົມບັດເຊັ່ນ: ຄວາມໂປ່ງແສງ, ການຫັນປ່ຽນ, ແລະການກັ່ນຕອງ, ບໍລິບົດ stacking ຈະຖືກສ້າງຂື້ນໂດຍອັດຕະໂນມັດເມື່ອຄ່າສະເພາະຖືກນຳໃຊ້.

ພະຍາຍາມເຂົ້າໃຈເລື່ອງນີ້: ເມື່ອເອກະສານຫນຶ່ງ (i.e., ອົງປະກອບຂອງເດັກນ້ອຍ) ຢູ່ໃນໂຟນເດີ (i.e., ສະພາບການ stacking ຂອງພໍ່ແມ່), ມັນບໍ່ສາມາດອອກຈາກໂຟນເດີນັ້ນຫຼືຖືກວາງໄວ້ລະຫວ່າງເອກະສານໃນໂຟນເດີທີ່ແຕກຕ່າງກັນ. z-index ຂອງມັນໃນປັດຈຸບັນແມ່ນກ່ຽວຂ້ອງພຽງແຕ່ຢູ່ໃນໂຟນເດີຂອງຕົນເອງ.

ໃນຮູບຂ້າງລຸ່ມນີ້, Paper B ປະຈຸບັນຢູ່ໃນສະພາບການ stacking ຂອງ 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. ຕົວທ່ອງເວັບບໍ່ສົນໃຈເອກະສານເດັກນ້ອຍແລະ stacks ສອງໂຟນເດີທໍາອິດ. ມັນເຫັນ Folder B (z-index: 2) ແລະວາງມັນຢູ່ເທິງສຸດຂອງ Folder A (z-index: 1) ເພາະວ່າພວກເຮົາຮູ້ວ່າສອງແມ່ນໃຫຍ່ກວ່າຫນຶ່ງ. ໃນຂະນະດຽວກັນ, ຫນ້າ .special-page ທີ່ຕັ້ງເປັນ z-index: 9999 ຫນ້າແມ່ນຢູ່ດ້ານລຸ່ມຂອງ stack ເຖິງແມ່ນວ່າ z-index ຂອງມັນຖືກກໍານົດເປັນມູນຄ່າສູງສຸດທີ່ເປັນໄປໄດ້. stacking contexts ຍັງສາມາດຖືກ nested (ໂຟນເດີພາຍໃນໂຟນເດີ), ສ້າງ "ຕົ້ນໄມ້ຄອບຄົວ." ຫຼັກການດຽວກັນໃຊ້ໄດ້: ເດັກນ້ອຍບໍ່ສາມາດຫນີຈາກໂຟນເດີຂອງພໍ່ແມ່. ໃນປັດຈຸບັນທີ່ທ່ານໄດ້ຮັບວິທີການ stacking contexts ປະຕິບັດຄືກັບໂຟນເດີທີ່ຈັດກຸ່ມແລະຈັດລໍາດັບຊັ້ນຊັ້ນໃຫມ່, ມັນສົມຄວນທີ່ຈະຖາມວ່າ: ເປັນຫຍັງຄຸນສົມບັດບາງຢ່າງ - ເຊັ່ນ: ການຫັນປ່ຽນແລະຄວາມໂປ່ງໃສ - ສ້າງສະພາບການ stacking ໃຫມ່? ນີ້ແມ່ນສິ່ງທີ່: ຄຸນສົມບັດເຫຼົ່ານີ້ບໍ່ໄດ້ສ້າງສະພາບການ stacking ເນື່ອງຈາກວິທີການເບິ່ງ; ພວກເຂົາເຈົ້າເຮັດມັນຍ້ອນວິທີການຂອງຕົວທ່ອງເວັບເຮັດວຽກພາຍໃຕ້ການ hood ໄດ້. ເມື່ອທ່ານໃຊ້ການຫັນປ່ຽນ, ຄວາມໂປ່ງໃສ, ການກັ່ນຕອງ, ຫຼືທັດສະນະ, ທ່ານກໍາລັງບອກຕົວທ່ອງເວັບວ່າ, "Hey, ອົງປະກອບນີ້ອາດຈະຍ້າຍ, rotate, ຫຼືຈືດໆ, ສະນັ້ນກຽມພ້ອມ!"

ເມື່ອທ່ານໃຊ້ຄຸນສົມບັດເຫຼົ່ານີ້, ຕົວທ່ອງເວັບຈະສ້າງສະພາບການ stacking ໃໝ່ ເພື່ອຈັດການການສະແດງຜົນໃຫ້ມີປະສິດທິພາບຫຼາຍຂຶ້ນ. ນີ້ອະນຸຍາດໃຫ້ຕົວທ່ອງເວັບສາມາດຈັດການພາບເຄື່ອນໄຫວ, ການຫັນປ່ຽນແລະຜົນກະທົບທາງສາຍຕາຢ່າງເປັນເອກະລາດ, ຫຼຸດຜ່ອນຄວາມຕ້ອງການທີ່ຈະຄິດໄລ່ຄືນວ່າອົງປະກອບເຫຼົ່ານີ້ພົວພັນກັບສ່ວນທີ່ເຫຼືອຂອງຫນ້າ. ຄິດວ່າມັນເປັນຕົວທ່ອງເວັບທີ່ເວົ້າວ່າ, "ຂ້ອຍຈະຈັດການໂຟນເດີນີ້ແຍກຕ່າງຫາກ, ດັ່ງນັ້ນຂ້ອຍບໍ່ຈໍາເປັນຕ້ອງປ່ຽນໂຕະທັງຫມົດໃນທຸກໆຄັ້ງທີ່ມັນມີການປ່ຽນແປງ." ແຕ່ມີຜົນຂ້າງຄຽງ. ເມື່ອຕົວທ່ອງເວັບຍົກອົງປະກອບເຂົ້າໄປໃນຊັ້ນຂອງມັນເອງ, ມັນຕ້ອງ "ແປ" ທຸກສິ່ງທຸກຢ່າງພາຍໃນມັນ, ສ້າງສະພາບການ stacking ໃຫມ່. ມັນຄ້າຍຄືກັບການເອົາໂຟນເດີອອກຈາກໂຕະເພື່ອຈັດການກັບມັນແຍກຕ່າງຫາກ; ທຸກສິ່ງທຸກຢ່າງຢູ່ໃນໂຟນເດີນັ້ນຖືກຈັດເປັນກຸ່ມ, ແລະຕົວທ່ອງເວັບໃນປັດຈຸບັນປະຕິບັດມັນເປັນຫນ່ວຍດຽວໃນເວລາທີ່ຕັດສິນໃຈວ່າສິ່ງທີ່ຢູ່ເທິງສຸດຂອງສິ່ງທີ່. ດັ່ງນັ້ນ, ເຖິງແມ່ນວ່າຄຸນສົມບັດການຫັນປ່ຽນແລະຄວາມໂປ່ງແສງອາດຈະບໍ່ປາກົດວ່າມີຜົນຕໍ່ວິທີການທີ່ອົງປະກອບວາງຊ້ອນກັນໃນສາຍຕາ, ພວກມັນເຮັດ, ແລະມັນແມ່ນສໍາລັບການເພີ່ມປະສິດທິພາບການປະຕິບັດ. ຄຸນສົມບັດ CSS ອື່ນໆຫຼາຍອັນຍັງສາມາດສ້າງ contexts stacking ສໍາລັບເຫດຜົນທີ່ຄ້າຍຄືກັນ. MDN ສະຫນອງບັນຊີລາຍຊື່ຄົບຖ້ວນຖ້າທ່ານຕ້ອງການຂຸດເລິກ. ມີຈໍານວນບໍ່ຫຼາຍປານໃດ, ເຊິ່ງພຽງແຕ່ສະແດງໃຫ້ເຫັນເຖິງວິທີທີ່ມັນງ່າຍທີ່ຈະສ້າງສະພາບການ stacking ໂດຍບໍ່ໄດ້ຕັ້ງໃຈໂດຍບໍ່ຮູ້ຕົວ. ບັນຫາ "Unstacking". ບັນຫາການວາງຊ້ອນກັນສາມາດເກີດຂື້ນໄດ້ດ້ວຍເຫດຜົນຫຼາຍຢ່າງ, ແຕ່ບາງບັນຫາແມ່ນພົບເລື້ອຍກວ່າຄົນອື່ນ. ອົງປະກອບຂອງ Modal ແມ່ນຮູບແບບຄລາສສິກເພາະວ່າພວກເຂົາຕ້ອງການສະຫຼັບອົງປະກອບເພື່ອ "ເປີດ" ໃນຊັ້ນເທິງຂ້າງເທິງອົງປະກອບອື່ນໆທັງຫມົດ, ຫຼັງຈາກນັ້ນເອົາມັນອອກຈາກຊັ້ນເທິງເມື່ອມັນ "ປິດ." ຂ້ອຍຫມັ້ນໃຈໄດ້ຫຼາຍວ່າພວກເຮົາທຸກຄົນໄດ້ເຂົ້າໄປໃນສະຖານະການທີ່ພວກເຮົາເປີດ modal ແລະ, ສໍາລັບເຫດຜົນໃດກໍ່ຕາມ, ມັນບໍ່ປາກົດ. ມັນບໍ່ແມ່ນວ່າມັນບໍ່ເປີດຢ່າງຖືກຕ້ອງ, ແຕ່ມັນເບິ່ງບໍ່ເຫັນໃນຊັ້ນຕ່ໍາຂອງສະພາບການ stacking. ນີ້ເຮັດໃຫ້ເຈົ້າສົງໄສວ່າ "ມາໄດ້ແນວໃດ?" ນັບ​ຕັ້ງ​ແຕ່​ທ່ານ​ກໍາ​ນົດ​:

.ວາງຊ້ອນ { ຕໍາແໜ່ງ: ຄົງ; /* ສ້າງ​ສະ​ພາບ​ການ stacking */ z-index: 1; /* ເອົາອົງປະກອບໃສ່ layer ຂ້າງເທິງທຸກຢ່າງອື່ນ */ inset: 0; width: 100%; ຄວາມສູງ: 100vh; overflow: ເຊື່ອງໄວ້; ສີພື້ນຫຼັງ: #00000080; }

ອັນນີ້ເບິ່ງຖືກຕ້ອງ, ແຕ່ຖ້າອົງປະກອບຫຼັກທີ່ມີຕົວກະຕຸ້ນ modal ເປັນອົງປະກອບລູກພາຍໃນອົງປະກອບແມ່ອື່ນທີ່ຕັ້ງເປັນ z-index: 1, ທາງດ້ານເຕັກນິກທີ່ວາງ modal ໃນ sublayer ທີ່ຖືກປິດບັງໂດຍໂຟເດີຕົ້ນຕໍ. ຂໍໃຫ້ເບິ່ງສະຖານະການສະເພາະນັ້ນ ແລະບາງບັນຫາການວາງຊ້ອນກັນທົ່ວໄປອື່ນໆ. ຂ້າ​ພະ​ເຈົ້າ​ຄິດ​ວ່າ​ທ່ານ​ຈະ​ເຫັນ​ບໍ່​ພຽງ​ແຕ່​ວິ​ທີ​ການ​ງ່າຍ​ທີ່​ຈະ​ສ້າງ stacking ໂດຍ​ບໍ່​ຕັ້ງ​ໃຈ​, ແຕ່​ຍັງ​ວິ​ທີ​ການ​ຈັດ​ການ​ໃຫ້​ເຂົາ​ເຈົ້າ​ຜິດ​ພາດ​. ນອກຈາກນັ້ນ, ວິທີທີ່ທ່ານກັບຄືນສູ່ລັດທີ່ຖືກຄຸ້ມຄອງແມ່ນຂຶ້ນກັບສະຖານະການ. ສະຖານະການທີ 1: The Trapped Modal

ທ່ານທັນທີສາມາດເຫັນ modal ຂອງທ່ານ trapped ໃນຊັ້ນຕ່ໍາແລະກໍານົດພໍ່ແມ່. ສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບ ຜູ້ພັດທະນາອັດສະລິຍະໄດ້ສ້າງສ່ວນຂະຫຍາຍເພື່ອຊ່ວຍ. ເຄື່ອງມືເຊັ່ນນີ້ "CSS Stacking Context Inspector" ສ່ວນຂະຫຍາຍ Chrome ເພີ່ມແຖບ z-index ເພີ່ມເຕີມໃສ່ DevTools ຂອງທ່ານເພື່ອສະແດງໃຫ້ທ່ານເຫັນຂໍ້ມູນກ່ຽວກັບອົງປະກອບທີ່ສ້າງສະພາບການ stacking.

ສ່ວນຂະຫຍາຍ IDE ທ່ານຍັງສາມາດສັງເກດເຫັນບັນຫາໃນລະຫວ່າງການພັດທະນາດ້ວຍສ່ວນຂະຫຍາຍເຊັ່ນນີ້ສໍາລັບ VS Code, ເຊິ່ງຊີ້ໃຫ້ເຫັນບັນຫາທີ່ມີທ່າແຮງໃນການຊ້ອນກັນໂດຍກົງໃນບັນນາທິການຂອງທ່ານ.

Unstacking ແລະ Regaining ການຄວບຄຸມ ຫຼັງຈາກທີ່ພວກເຮົາໄດ້ກໍານົດສາເຫດຂອງຮາກ, ຂັ້ນຕອນຕໍ່ໄປແມ່ນການຈັດການກັບມັນ. ມີຫຼາຍວິທີທີ່ທ່ານສາມາດປະຕິບັດເພື່ອແກ້ໄຂບັນຫານີ້, ແລະຂ້ອຍຈະບອກມັນຕາມລໍາດັບ. ທ່ານສາມາດເລືອກໃຜໃນລະດັບໃດຫນຶ່ງ, ເຖິງແມ່ນວ່າ; ບໍ່ມີໃຜສາມາດຈົ່ມຫຼືຂັດຂວາງຄົນອື່ນ. ປ່ຽນໂຄງສ້າງ HTML ນີ້ຖືວ່າເປັນການແກ້ໄຂທີ່ດີທີ່ສຸດ. ສໍາລັບທ່ານທີ່ຈະເຂົ້າໄປໃນບັນຫາສະພາບການ stacking, ທ່ານຕ້ອງໄດ້ວາງບາງອົງປະກອບໃນຕໍາແຫນ່ງຕະຫລົກພາຍໃນ HTML ຂອງທ່ານ. ການປັບໂຄງສ້າງຫນ້າຈະຊ່ວຍໃຫ້ທ່ານປ່ຽນຮູບແບບ DOM ແລະລົບລ້າງບັນຫາການຊ້ອນກັນ. ຊອກຫາອົງປະກອບທີ່ມີບັນຫາແລະເອົາມັນອອກຈາກອົງປະກອບໃສ່ກັບດັກໃນ HTML markup. ຕົວຢ່າງເຊັ່ນ, ພວກເຮົາສາມາດແກ້ໄຂສະຖານະການທໍາອິດ, "The Trapped Modal," ໂດຍການຍ້າຍ .modal-container ອອກຈາກ header ແລະວາງມັນຢູ່ໃນອົງປະກອບ ດ້ວຍຕົວມັນເອງ.

ເມື່ອທ່ານຄລິກໃສ່ປຸ່ມ "Open Modal", modal ແມ່ນຖືກຈັດໃສ່ຢູ່ທາງຫນ້າຂອງທຸກສິ່ງທຸກຢ່າງອື່ນຕາມທີ່ມັນຄວນຈະເປັນ. ເບິ່ງ Pen Scenario 1: The Trapped Modal (Solution) [forked] ໂດຍ Shoyombo Gabriel Ayomide. ປັບParent Stacking Context ໃນ CSS ຈະເປັນແນວໃດຖ້າອົງປະກອບແມ່ນຫນຶ່ງທີ່ທ່ານບໍ່ສາມາດຍ້າຍອອກໂດຍບໍ່ມີການທໍາລາຍຮູບແບບ? ມັນດີກວ່າທີ່ຈະແກ້ໄຂບັນຫາ: ພໍ່ແມ່ກໍານົດສະພາບການ. ຊອກຫາຄຸນສົມບັດ CSS (ຫຼືຄຸນສົມບັດ) ທີ່ຮັບຜິດຊອບສໍາລັບການກະຕຸ້ນບໍລິບົດແລະເອົາມັນອອກ. ຖ້າມັນມີຈຸດປະສົງແລະບໍ່ສາມາດເອົາອອກໄດ້, ໃຫ້ພໍ່ແມ່ມີຄ່າ z-index ສູງກວ່າອົງປະກອບພີ່ນ້ອງຂອງມັນເພື່ອຍົກພາຊະນະທັງຫມົດ. ດ້ວຍຄ່າ z-index ສູງກວ່າ, ຕູ້ຄອນເທນເນີຂອງແມ່ຈະຍ້າຍໄປຢູ່ເທິງສຸດ, ແລະເດັກນ້ອຍຂອງມັນປາກົດຢູ່ໃກ້ກັບຜູ້ໃຊ້. ອີງຕາມສິ່ງທີ່ພວກເຮົາໄດ້ຮຽນຮູ້ໃນສະຖານະການ "ການເລື່ອນລົງໃຕ້ນ້ໍາ", ພວກເຮົາບໍ່ສາມາດຍ້າຍລາຍການເລື່ອນລົງອອກຈາກແຖບນໍາທາງ; ມັນຈະບໍ່ມີຄວາມຫມາຍ. ແນວໃດກໍ່ຕາມ, ພວກເຮົາສາມາດເພີ່ມຄ່າ z-index ຂອງ container .navbar ໃຫ້ໃຫຍ່ກວ່າຄ່າ z-index ຂອງອົງປະກອບ .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, Portal ແມ່ນຄຸນສົມບັດທີ່ຊ່ວຍໃຫ້ທ່ານສະແດງອົງປະກອບທີ່ຢູ່ນອກລໍາດັບຊັ້ນພໍ່ແມ່ປົກກະຕິໃນ DOM. Portals ແມ່ນຄ້າຍຄືອຸປະກອນ teleportation ສໍາລັບອົງປະກອບຂອງທ່ານ. ພວກມັນໃຫ້ທ່ານສະແດງ HTML ຂອງອົງປະກອບຢູ່ບ່ອນໃດກໍໄດ້ໃນເອກະສານ (ໂດຍປົກກະຕິແມ່ນເຂົ້າໄປຢູ່ໃນ document.body) ໃນຂະນະທີ່ຮັກສາມັນເຊື່ອມຕໍ່ຢ່າງມີເຫດຜົນກັບພໍ່ແມ່ຕົ້ນສະບັບຂອງມັນສໍາລັບເຄື່ອງປະກອບ, ລັດ, ແລະເຫດການຕ່າງໆ. ອັນນີ້ແມ່ນດີເລີດສຳລັບການຫຼົບຫຼີກການໃສ່ກັບດັກໃນບໍລິບົດການວາງຊ້ອນກັນ ນັບຕັ້ງແຕ່ຜົນຜະລິດທີ່ສະແດງອອກມາປາກົດຢູ່ພາຍນອກກ່ອງບັນຈຸແມ່ທີ່ມີບັນຫາ. ReactDOM.createPortal( , document.body );

ນີ້ຮັບປະກັນວ່າເນື້ອໃນແບບເລື່ອນລົງຂອງທ່ານບໍ່ໄດ້ຖືກເຊື່ອງໄວ້ຢູ່ເບື້ອງຫຼັງພໍ່ແມ່ຂອງມັນ, ເຖິງແມ່ນວ່າພໍ່ແມ່ມີ overflow: ເຊື່ອງໄວ້ຫຼື z-index ຕ່ໍາ. ໃນສະຖານະການ "ຄໍາແນະນໍາເຄື່ອງມື Clipped" ທີ່ພວກເຮົາເບິ່ງກ່ອນຫນ້ານັ້ນ, ຂ້າພະເຈົ້າໄດ້ໃຊ້ Portal ເພື່ອຊ່ວຍເອົາຄໍາແນະນໍາເຄື່ອງມືຈາກການລົ້ນ: clip ທີ່ເຊື່ອງໄວ້ໂດຍການວາງມັນຢູ່ໃນຕົວຂອງເອກະສານແລະວາງມັນໄວ້ຂ້າງເທິງ trigger ພາຍໃນຖັງ. ເບິ່ງ Pen Scenario 3: The Clipped Tooltip (Solution) [forked] ໂດຍ Shoyombo Gabriel Ayomide. ແນະນຳການວາງສະແຕນບໍລິບົດໂດຍບໍ່ມີຜົນຂ້າງຄຽງ ວິທີການທັງຫມົດທີ່ອະທິບາຍໃນພາກກ່ອນຫນ້ານີ້ແມ່ນແນໃສ່ "unstacking" ອົງປະກອບຈາກບັນຫາ stacking contexts, ແຕ່ມີບາງສະຖານະການທີ່ຕົວຈິງແລ້ວທ່ານຕ້ອງການຫຼືຕ້ອງການສ້າງສະພາບການ stacking. ການສ້າງສະພາບການ stacking ໃຫມ່ແມ່ນງ່າຍ, ແຕ່ວິທີການທັງຫມົດມາພ້ອມກັບຜົນກະທົບຂ້າງຄຽງ. ນັ້ນແມ່ນ, ຍົກເວັ້ນການໃຊ້ການໂດດດ່ຽວ: isolate. ເມື່ອນຳໄປໃຊ້ກັບອົງປະກອບໃດໜຶ່ງ, ບໍລິບົດການຊ້ອນກັນຂອງລູກຂອງອົງປະກອບນັ້ນຖືກກຳນົດໃຫ້ສົມທຽບກັບແຕ່ລະລູກ ແລະ ພາຍໃນບໍລິບົດນັ້ນ, ແທນທີ່ຈະໄດ້ຮັບອິດທິພົນຈາກອົງປະກອບພາຍນອກຂອງມັນ. ຕົວຢ່າງຄລາດສິກແມ່ນກໍານົດອົງປະກອບນັ້ນເປັນຄ່າລົບ, ເຊັ່ນ z-index: -1. ຈິນຕະນາການວ່າທ່ານມີອົງປະກອບ .card. ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ​ເພີ່ມ​ຮູບ​ຮ່າງ​ການ​ຕົກ​ແຕ່ງ​ທີ່​ຢູ່​ທາງ​ຫລັງ​ຂໍ້​ຄວາມ​ຂອງ .card​, ແຕ່​ຢູ່​ເທິງ​ຂອງ​ພື້ນ​ຖານ​ຂອງ​ບັດ​. ໂດຍບໍ່ມີສະພາບການ stacking ໃນບັດ, z-index: -1 ສົ່ງຮູບຮ່າງໄປຫາລຸ່ມສຸດຂອງເນື້ອໃນ stacking ຮາກ (ຫນ້າທັງຫມົດ). ນີ້ເຮັດໃຫ້ມັນຫາຍໄປທາງຫລັງຂອງພື້ນຫລັງສີຂາວຂອງ .card: ເບິ່ງ Pen Negative z-index (ບັນຫາ) [forked] ໂດຍ Shoyombo Gabriel Ayomide. ເພື່ອແກ້ໄຂບັນຫານີ້, ພວກເຮົາປະກາດການໂດດດ່ຽວ: isolate ໃນພໍ່ແມ່ .card: ເບິ່ງ Pen Negative z-index (ການແກ້ໄຂ) [forked] ໂດຍ Shoyombo Gabriel Ayomide. ໃນປັດຈຸບັນ, ອົງປະກອບ .card ຕົວມັນເອງກາຍເປັນສະພາບການ stacking. ເມື່ອອົງປະກອບຂອງລູກຂອງມັນ — ຮູບຮ່າງປະດັບທີ່ສ້າງຂຶ້ນໃນ :before pseudo-element — ມີ z-index: -1, ມັນໄປຢູ່ລຸ່ມສຸດຂອງບໍລິບົດການຈັດວາງຂອງພໍ່ແມ່. ມັນນັ່ງຢູ່ເບື້ອງຫຼັງຂໍ້ຄວາມ ແລະຢູ່ເທິງພື້ນຫຼັງຂອງບັດຢ່າງສົມບູນແບບ, ຕາມທີ່ຕັ້ງໄວ້. ສະຫຼຸບ ຈືຂໍ້ມູນການ: ໃນຄັ້ງຕໍ່ໄປ z-index ຂອງທ່ານເບິ່ງຄືວ່າບໍ່ມີການຄວບຄຸມ, ມັນເປັນສະພາບການ stacking trapped. ເອກະສານອ້າງອີງ

ບໍລິບົດການຈັດວາງ (MDN) Z-index ແລະ stacking contexts (web.dev) "ວິທີການສ້າງສະພາບການ stacking ໃຫມ່ກັບຊັບສິນທີ່ໂດດດ່ຽວໃນ CSS", Natalie Pina "What The Heck, z-index?", Josh Comeau

ອ່ານເພີ່ມເຕີມໃນ SmashingMag

"ການຄຸ້ມຄອງ CSS Z-Index ໃນໂຄງການຂະຫນາດໃຫຍ່", Steven Frieson "ຫົວຫນຽວແລະອົງປະກອບຄວາມສູງເຕັມ: ການປະສົມປະສານທີ່ຫຍຸ້ງຍາກ", Philip Braunen "ການຄຸ້ມຄອງດັດຊະນີ Z ໃນແອັບພລິເຄຊັນເວັບທີ່ອີງໃສ່ອົງປະກອບ", Pavel Pomerantsev "ຊັບສິນ Z-Index CSS: ລັກສະນະທີ່ສົມບູນແບບ", Louis Lazaris

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