Z-index

ອົງປະກອບ Bootstrap ຫຼາຍໆອັນໃຊ້ z-index, ຄຸນສົມບັດ CSS ທີ່ຊ່ວຍຄວບຄຸມການຈັດວາງໂດຍການສະຫນອງແກນທີສາມເພື່ອຈັດແຈງເນື້ອຫາ. ພວກເຮົາໃຊ້ຂະຫນາດ z-index ເລີ່ມຕົ້ນໃນ Bootstrap ທີ່ຖືກອອກແບບເພື່ອການນໍາທາງຊັ້ນ, ຄໍາແນະນໍາແລະ popovers, modals, ແລະອື່ນໆຢ່າງຖືກຕ້ອງ.

ຄຸນຄ່າທີ່ສູງກວ່າເຫຼົ່ານີ້ເລີ່ມຕົ້ນດ້ວຍຕົວເລກທີ່ມັກ, ສູງ ແລະສະເພາະພໍທີ່ຈະຫຼີກລ່ຽງການຂັດແຍ້ງກັນໄດ້. ພວກເຮົາຕ້ອງການຊຸດມາດຕະຖານເຫຼົ່ານີ້ໃນທົ່ວອົງປະກອບຊັ້ນຂອງພວກເຮົາ - ຄໍາແນະນໍາເຄື່ອງມື, popovers, navbars, dropdowns, modals - ດັ່ງນັ້ນພວກເຮົາສາມາດສອດຄ່ອງຢ່າງສົມເຫດສົມຜົນໃນພຶດຕິກໍາ. ບໍ່ມີເຫດຜົນທີ່ພວກເຮົາບໍ່ສາມາດໃຊ້ 100+ ຫຼື 500+.

ພວກເຮົາບໍ່ສົ່ງເສີມການປັບແຕ່ງຄ່າສ່ວນບຸກຄົນເຫຼົ່ານີ້; ຖ້າເຈົ້າປ່ຽນອັນໜຶ່ງ, ເຈົ້າອາດຈະຕ້ອງປ່ຽນພວກມັນທັງໝົດ.

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;
$zindex-toast:                      1090;

ເພື່ອຈັດການການທັບຊ້ອນກັນພາຍໃນອົງປະກອບ (ເຊັ່ນ: ປຸ່ມ ແລະອິນພຸດໃນກຸ່ມການປ້ອນຂໍ້ມູນ), ພວກເຮົາໃຊ້ z-indexຄ່າຕົວເລກດຽວທີ່ຕໍ່າຂອງ 1, 2, ແລະ 3ສໍາລັບຄ່າເລີ່ມຕົ້ນ, ເລື່ອນ ແລະສະຖານະທີ່ເຄື່ອນໄຫວ. ເມື່ອ hover/focus/active, ພວກເຮົາເອົາອົງປະກອບສະເພາະອັນໃດອັນໜຶ່ງມາຢູ່ແຖວໜ້າດ້ວຍ z-indexມູນຄ່າທີ່ສູງກວ່າເພື່ອສະແດງຂອບຂອງເຂົາເຈົ້າຕໍ່ກັບອົງປະກອບຂອງພີ່ນ້ອງ.