ການກໍານົດຕໍາແຫນ່ງອົງປະກອບທີ່ຊ້ໍາກັນທີ່ມີຮູບແບບຊັ້ນ Cascading
ຫນຶ່ງໃນຄວາມທ້າທາຍໃນເວລາທີ່ນໍາໃຊ້ CSS ຕໍາແຫນ່ງສໍາລັບຮູບແບບເວັບໄຊຕ໌ແມ່ນວ່າບາງສ່ວນຂອງອົງປະກອບຂອງທ່ານອາດຈະຊ້ໍາກັນອີກ. ນີ້ເຮັດວຽກດີຖ້າທ່ານຕ້ອງການອົງປະກອບສຸດທ້າຍໃນ HTML ທີ່ຢູ່ເທິງແຕ່ຖ້າທ່ານບໍ່ຕ້ອງການຫຼືສິ່ງທີ່ທ່ານຕ້ອງການມີອົງປະກອບທີ່ບໍ່ມີຊ້ໍາຄົນອື່ນເຮັດເພາະວ່າການອອກແບບນີ້ຮຽກຮ້ອງໃຫ້ເບິ່ງແບບ "ແບບນີ້" ? ໃນຄໍາສັ່ງທີ່ຈະປ່ຽນວິທີການອົງປະກອບຊ້ໍາກັນທ່ານຕ້ອງໃຊ້ຄຸນສົມບັດຂອງ CSS.
ຖ້າທ່ານໄດ້ໃຊ້ເຄື່ອງມືຮູບພາບໃນ Word ແລະ PowerPoint ຫຼືບັນນາທິການຮູບພາບທີ່ເຂັ້ມແຂງເຊັ່ນ Adobe Photoshop, ແລ້ວໂອກາດທີ່ທ່ານໄດ້ເຫັນບາງສິ່ງບາງຢ່າງເຊັ່ນ z-index ໃນການປະຕິບັດ. ໃນບັນດາໂຄງການເຫຼົ່ານີ້, ທ່ານສາມາດເນັ້ນຫນັກໃສ່ຈຸດປະສົງທີ່ທ່ານໄດ້ແຕ້ມ, ແລະເລືອກເອົາທາງເລືອກທີ່ຈະ "ສົ່ງໃຫ້ກັບ" ຫຼື "ເອົາມາໃຫ້ທາງຫນ້າ" ບາງສ່ວນຂອງເອກະສານຂອງທ່ານ. ໃນ Photoshop, ທ່ານບໍ່ມີຫນ້າທີ່ເຫຼົ່ານີ້, ແຕ່ທ່ານມີແປ້ນ "Layer" ຂອງໂຄງການແລະທ່ານສາມາດຈັດການບ່ອນທີ່ອົງປະກອບຢູ່ໃນຮູບ canvas ໂດຍການຈັດວາງ layer ເຫຼົ່ານີ້. ໃນທັງສອງຕົວຢ່າງເຫຼົ່ານີ້, ທ່ານກໍາລັງຕັ້ງຄ່າດັດສະນີ z ຂອງວັດຖຸເຫຼົ່ານັ້ນ.
ດັດຊະນີ z ແມ່ນຫຍັງ?
ເມື່ອທ່ານກໍາລັງໃຊ້ຕໍາແຫນ່ງ CSS ໃນການຈັດຕໍາແຫນ່ງໃນອົງປະກອບ, ທ່ານຈໍາເປັນຕ້ອງຄິດໃນສາມຂະຫນາດ. ມີສອງຂະຫນາດມາດຕະຖານ: ຊ້າຍ / ຂວາແລະດ້ານເທິງ / ດ້ານລຸ່ມ. ດັດຊະນີທາງດ້ານຊ້າຍຫາຂວາແມ່ນເປັນດັດສະນີ x, ໃນຂະນະທີ່ດ້ານເທິງຫາລຸ່ມຫນຶ່ງແມ່ນດັດຊະນີ y. ນີ້ແມ່ນວິທີທີ່ທ່ານຈະຕັ້ງອົງປະກອບຢຽດຕາມທາງຂວາງຫຼືທາງຕັ້ງແຕ່ໃຊ້ດັດຊະນີສອງນີ້.
ໃນເວລາທີ່ຢູ່ໃນການອອກແບບເວັບ, ຍັງມີຄໍາສັ່ງ stacking ຂອງຫນ້າ. ອົງປະກອບແຕ່ລະຢູ່ໃນຫນ້າສາມາດວາງຂັ້ນຕອນຂ້າງເທິງຫຼືຂ້າງລຸ່ມນີ້ໄດ້. ຄຸນສົມບັດດັດຊະນີ z ທີ່ກໍານົດບ່ອນທີ່ຢູ່ໃນ stack ແຕ່ລະອົງປະກອບແມ່ນ. ຖ້າດັດຊະນີ x ແລະດັດຊະນີ y ແມ່ນເສັ້ນແນວນອນແລະແນວຕັ້ງ, ຫຼັງຈາກນັ້ນດັດຊະນີ z ແມ່ນຄວາມເລິກຂອງຫນ້າ, ສ່ວນໃຫຍ່ແມ່ນຂະຫນາດທີ 3.
ຂ້າພະເຈົ້າຢາກຄິດກ່ຽວກັບອົງປະກອບໃນເວັບໄຊທ໌ເປັນຕ່ອນຂອງເຈ້ຍ, ແລະ ຫນ້າເວັບ ທີ່ເປັນຕົວປະສານງານ. ບ່ອນທີ່ຂ້າພະເຈົ້າຈັດວາງເຈ້ຍແມ່ນຖືກກໍານົດໂດຍຕໍາແຫນ່ງ, ແລະວິທີການທີ່ມັນກວມເອົາຫຼາຍໆອົງປະກອບອື່ນໆແມ່ນດັດຊະນີ z.
ດັດຊະນີ z ແມ່ນຈໍານວນ, ບໍ່ວ່າຈະເປັນທາງບວກ (ຕົວຢ່າງ 100) ຫຼືທາງລົບ (ຕົວຢ່າງ: -100). ດັດຊະນີ z - ໂດຍຄ່າເລີ່ມຕົ້ນແມ່ນ 0. ອົງປະກອບທີ່ມີດັດຊະນີ z ສູງສຸດແມ່ນຢູ່ເທິງ, ຕິດຕາມໂດຍສູງສຸດຕໍ່ໄປແລະອື່ນໆລົງໄປຫາດັດຊະນີ z ທີ່ຕໍ່າສຸດ. ຖ້າສອງອົງປະກອບມີມູນຄ່າດັດຊະນີ z ດຽວກັນ (ຫຼືມັນບໍ່ໄດ້ກໍານົດ, ຊຶ່ງຫມາຍຄວາມວ່າໃຊ້ຄ່າເລີ່ມຕົ້ນຂອງ 0), ຕົວທ່ອງເວັບຈະຈັດຊັ້ນໃຫ້ພວກເຂົາຢູ່ໃນລໍາດັບທີ່ພວກເຂົາປາກົດຢູ່ໃນ HTML.
ວິທີການໃຊ້ z-index
ໃຫ້ອົງປະກອບແຕ່ລະທ່ານຕ້ອງການໃນ stack ຂອງທ່ານມີມູນຄ່າດັດຊະນີ z ທີ່ແຕກຕ່າງກັນ. ຕົວຢ່າງ: ຖ້າຂ້ອຍມີອົງປະກອບຫ້າຄື:
- ອົງປະກອບ 1 - z-index ຂອງ -25
- ອົງປະກອບ 2 - z - ດັດສະນີຂອງ 82
- element 3 - z-index ບໍ່ຖືກກໍານົດ
- element 4-z-index of 10
- element 5-z-index of -3
ພວກເຂົາເຈົ້າຈະຈັດລຽງຕາມລໍາດັບດັ່ງຕໍ່ໄປນີ້:
- element 2
- element 4
- element 3
- element 5
- element 1
ຂ້າພະເຈົ້າຂໍແນະນໍາໃຫ້ນໍາໃຊ້ມູນຄ່າດັດຊະນີ Z ທີ່ແຕກຕ່າງກັນຢ່າງຫຼວງຫຼາຍເພື່ອຈັດການອົງປະກອບຂອງທ່ານ. ວິທີການດັ່ງກ່າວ, ຖ້າທ່ານເພີ່ມອົງປະກອບເພີ່ມເຕີມໃນຫນ້າຕໍ່ໄປ, ທ່ານມີຫ້ອງທີ່ຈະຈັດຊັ້ນໃຫ້ພວກເຂົາໂດຍບໍ່ຕ້ອງປັບຄ່າ z-index ຂອງທຸກໆອົງປະກອບອື່ນໆ. ຍົກຕົວຢ່າງ:
- 100 ສໍາລັບອົງປະກອບທີ່ສູງທີ່ສຸດຂອງຂ້ອຍ
- 0 ສໍາລັບອົງປະກອບກາງຂອງຂ້ອຍ
- -100 ສໍາລັບອົງປະກອບລຸ່ມຂອງຂ້ອຍ
ທ່ານຍັງສາມາດໃຫ້ສອງອົງປະກອບມູນຄ່າດັດຊະນີ z ດຽວກັນໄດ້. ຖ້າອົງປະກອບເຫຼົ່ານີ້ຖືກຈັດລຽງ, ພວກເຂົາຈະສະແດງໃນລໍາດັບທີ່ພວກເຂົາຖືກຂຽນໄວ້ໃນ HTML, ມີອົງປະກອບສຸດທ້າຍຢູ່ເທິງສຸດ.
ຫນຶ່ງຫມາຍເຫດ, ສໍາລັບອົງປະກອບທີ່ມີປະສິດທິຜົນການນໍາໃຊ້ຄຸນສົມບັດດັດຊະນີ z, ມັນຕ້ອງເປັນອົງປະກອບລະດັບຕັນຫຼືໃຊ້ການສະແດງຂອງ "ຕັນ" ຫຼື "ເສັ້ນໃນ - ຕັນ" ໃນໄຟລ໌ CSS ຂອງທ່ານ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂເມື່ອ 12/09/16 ໂດຍ Jeremy Girard.