ການຕັ້ງຕໍາແຫນ່ງ CSS ແມ່ນຫຼາຍກວ່າພຽງແຕ່ X, Y ພິກັດ
ການຕັ້ງຕໍາແຫນ່ງ CSS ໄດ້ເປັນສ່ວນຫນຶ່ງທີ່ສໍາຄັນໃນການສ້າງຮູບແບບເວັບໄຊທ໌. ເຖິງວ່າຈະມີການເພີ່ມຂຶ້ນຂອງເຕັກໂນໂລຢີຮູບແບບໃຫມ່ CSS ເຊັ່ນ Flexbox ແລະ CSS Grid, ຕໍາແຫນ່ງຍັງມີສະຖານທີ່ສໍາຄັນໃນຖົງຂອງນັກອອກແບບເວັບໄຊຕ໌ຂອງ tricks.
ໃນເວລາທີ່ນໍາໃຊ້ CSS ຕໍາແຫນ່ງ, ສິ່ງທໍາອິດທີ່ທ່ານຕ້ອງການຈະເຮັດແມ່ນສ້າງຄຸນສົມບັດ CSS ສໍາລັບຕໍາແຫນ່ງເພື່ອບອກຕົວທ່ອງເວັບວ່າທ່ານຈະໃຊ້ຕໍາແຫນ່ງຢ່າງແທ້ຈິງຫຼືສໍາລັບອົງປະກອບທີ່ກໍານົດໄວ້. ນອກນັ້ນທ່ານຍັງຕ້ອງໄດ້ເຂົ້າໃຈຢ່າງເລິກເຊິ່ງກ່ຽວກັບຄວາມແຕກຕ່າງລະຫວ່າງສອງຄຸນສົມບັດຂອງຕໍາແຫນ່ງນີ້.
ໃນຂະນະທີ່ຢ່າງແທ້ຈິງແລະຍາດພີ່ນ້ອງແມ່ນສອງຄຸນສົມບັດຕໍາແຫນ່ງ CSS ທີ່ຖືກນໍາໃຊ້ຫຼາຍທີ່ສຸດໃນການອອກແບບເວັບໄຊຕ໌, ມີສີ່ປະເທດທີ່ມີຄຸນສົມບັດຕໍາແຫນ່ງ:
- static
- ຢ່າງແທ້ຈິງ
- ພີ່ນ້ອງ
- fixed
ສະຖິດແມ່ນຕໍາແຫນ່ງໃນຕອນຕົ້ນສໍາລັບອົງປະກອບໃດຫນຶ່ງໃນຫນ້າເວັບ. ຖ້າທ່ານບໍ່ກໍານົດຕໍາແຫນ່ງຂອງອົງປະກອບ, ມັນຈະຄົງຢູ່. ນີ້ຫມາຍຄວາມວ່າມັນຈະສະແດງໃນຫນ້າຈໍອີງໃສ່ບ່ອນທີ່ມັນຢູ່ໃນ ເອກະສານ HTML ແລະມັນຈະສະແດງພາຍໃນການ ໄຫລ ຂອງເອກສານນັ້ນ.
ຖ້າທ່ານນໍາໃຊ້ກົດລະບຽບການຕັ້ງຕໍາແຫນ່ງເຊັ່ນເທິງຫຼືຊ້າຍກັບອົງປະກອບທີ່ມີຕໍາແຫນ່ງຄົງທີ່, ກົດເຫຼົ່ານັ້ນຈະຖືກຍົກເລີກແລະອົງປະກອບຈະຢູ່ບ່ອນທີ່ມັນຈະປາກົດໃນການໄຫລຂອງເອກະສານປົກກະຕິ. ໃນຄວາມເປັນຈິງ, ທ່ານກໍ່ຈະບໍ່ຈໍາເປັນຕ້ອງກໍານົດອົງປະກອບທີ່ຢູ່ໃນຖານະສະຖິດໃນ CSS ເນື່ອງຈາກວ່າມັນເປັນມູນຄ່າທີ່ບໍ່ຖືກຕ້ອງ.
Absolute CSS Positioning
ຕໍາແຫນ່ງຢ່າງແນ່ນອນແມ່ນອາດຈະເປັນບ່ອນທີ່ CSS ທີ່ງ່າຍທີ່ສຸດທີ່ຈະເຂົ້າໃຈ. ທ່ານເລີ່ມຕົ້ນດ້ວຍຄຸນສົມບັດຕໍາແຫນ່ງ CSS ນີ້:
ຕໍາແຫນ່ງ: absolute;ມູນຄ່ານີ້ບອກບາວເບີ່ງວ່າສິ່ງໃດຈະຖືກວາງໄວ້ຄວນຖືກໂຍກຍ້າຍຈາກການໄຫຼປົກກະຕິຂອງເອກະສານແລະແທນທີ່ຈະຖືກຈັດໃສ່ຢູ່ໃນສະຖານທີ່ທີ່ແນ່ນອນໃນຫນ້າ. ນີ້ແມ່ນຄໍານວນໂດຍອີງໃສ່ບັນດາບັນພະບຸລຸດທີ່ບໍ່ແມ່ນສະຖານະທີ່ໃກ້ຄຽງທີ່ສຸດຂອງອົງປະກອບນັ້ນ.
ເນື່ອງຈາກວ່າອົງປະກອບຕໍາແຫນ່ງທີ່ຖືກກໍານົດອອກຈາກການໄຫຼປົກກະຕິຂອງເອກະສານ, ມັນຈະບໍ່ມີຜົນກະທົບວິທີການອົງປະກອບກ່ອນມັນຫລືຫຼັງຈາກມັນຢູ່ໃນ HTML ຖືກຕັ້ງຢູ່ຫນ້າເວັບ.
ເປັນຕົວຢ່າງ - ຖ້າທ່ານມີຕໍາແຫນ່ງທີ່ຖືກນໍາໃຊ້ມູນຄ່າຂອງພີ່ນ້ອງ (ພວກເຮົາຈະເບິ່ງມູນຄ່ານີ້ໃນໄລຍະສັ້ນໆ) ແລະພາຍໃນນັ້ນທ່ານມີວັກຫນຶ່ງທີ່ທ່ານຕ້ອງການທີ່ຈະຕັ້ງຄ່າ 50 pixels ຈາກປາຍຂອງພະແນກ, ທ່ານ ຈະເພີ່ມມູນຄ່າຕໍາແຫນ່ງຂອງ "ຢ່າງແທ້ຈິງ" ກັບວັກດັ່ງກ່າວພ້ອມກັບມູນຄ່າ offset ຂອງ 50px ໃນຄຸນສົມບັດ "ເທິງ", ເຊັ່ນນີ້.
ຕໍາແຫນ່ງ: absolute; top: 50pxອົງປະກອບທີ່ຕັ້ງຢູ່ຢ່າງແທ້ຈິງນີ້ສະເຫມີຈະສະແດງ 50 pixels ຈາກປາຍຂອງຕໍາແຫນ່ງທີ່ຂ້ອນຂ້າງຂື້ນ - ບໍ່ວ່າສິ່ງທີ່ສະແດງໃຫ້ເຫັນອີກໃນການໄຫຼປົກກະຕິ. ອົງປະກອບຂອງທ່ານ "ຢ່າງແທ້ຈິງ" ຕໍາແຫນ່ງນໍາໃຊ້ຫນຶ່ງຕໍາແຫນ່ງທີ່ຂ້ອນຂ້າງເປັນສະພາບການຂອງຕົນແລະມູນຄ່າ positing ທ່ານນໍາໃຊ້ແມ່ນພີ່ນ້ອງກັນວ່າ.
ຄຸນລັກສະນະສີ່ຕໍາແຫນ່ງທີ່ທ່ານມີໃຫ້ໃຊ້ແມ່ນ:
- ດ້ານເທິງ
- right
- ດ້ານລຸ່ມ
- left
ທ່ານສາມາດນໍາໃຊ້ທາງດ້ານເທິງຫຼືດ້ານລຸ່ມ (ເນື່ອງຈາກວ່າອົງປະກອບບໍ່ສາມາດຕັ້ງຕໍາແຫນ່ງໄດ້ຕາມທັງຄ່າເຫຼົ່ານີ້) ແລະທັງຂວາຫຼືຊ້າຍ.
ຖ້າຫາກວ່າອົງປະກອບຖືກກໍານົດເປັນຕໍາແຫນ່ງທີ່ແທ້ຈິງ, ແຕ່ວ່າມັນບໍ່ມີບັນດາບັນພະບຸລຸດທີ່ບໍ່ມີສະຖຽນລະພາບ, ຫຼັງຈາກນັ້ນມັນຈະຖືກຕໍາແຫນ່ງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບຮ່າງກາຍ, ເຊິ່ງເປັນອົງປະກອບລະດັບສູງສຸດຂອງຫນ້າ.
ຕໍາແຫນ່ງທີ່ກ່ຽວຂ້ອງ
ພວກເຮົາໄດ້ກ່າວເຖິງຕໍາແຫນ່ງຂອງພີ່ນ້ອງແລ້ວ, ດັ່ງນັ້ນໃຫ້ເບິ່ງຊັບສິນດັ່ງກ່າວໃນປັດຈຸບັນ.
ຕໍາແຫນ່ງທີ່ກ່ຽວຂ້ອງນໍາໃຊ້ຄຸນສົມບັດສີ່ຕໍາແຫນ່ງດຽວກັນເປັນຕໍາແຫນ່ງທີ່ແທ້ຈິງ, ແຕ່ແທນທີ່ຈະຕໍາແຫນ່ງຂອງອົງປະກອບໃນບັນດາບັນພະບຸລຸດທີ່ບໍ່ຕັ້ງຕໍາແຫນ່ງທີ່ໃກ້ຄຽງທີ່ສຸດ, ມັນເລີ່ມຕົ້ນຈາກບ່ອນທີ່ອົງປະກອບຈະເປັນຖ້າມັນຍັງຢູ່ໃນການໄຫຼປົກກະຕິ.
ຕົວຢ່າງ: ຖ້າທ່ານມີສາມວັກເທິງຫນ້າເວັບຂອງທ່ານ, ແລະທີສາມມີແບບ "ຕໍາແຫນ່ງ: ຍາດ" ທີ່ຖືກວາງລົງໃສ່ມັນ, ຕໍາແຫນ່ງຂອງມັນຈະຖືກຊົດເຊີຍອີງໃສ່ສະຖານທີ່ໃນປະຈຸບັນ.
Paragraph 3
Paragraph 1
ໃນຕົວຢ່າງຂ້າງເທິງ, ວັກສາມຈະຖືກຕໍາແຫນ່ງ 2em ຈາກເບື້ອງຊ້າຍຂອງອົງປະກອບຂອງບັນຈຸ, ແຕ່ຍັງຈະຢູ່ພາຍໃຕ້ສອງວັກທໍາອິດ. ມັນຈະຢູ່ໃນການໄຫຼປົກກະຕິຂອງເອກະສານ, ແລະພຽງແຕ່ໄດ້ຮັບການຊົດເຊີຍເລັກນ້ອຍ. ຖ້າທ່ານປ່ຽນມັນໄປຕໍາແຫນ່ງ: ຢ່າງແທ້ຈິງ; ສິ່ງໃດກໍ່ຕາມມັນຈະສະແດງຢູ່ເທິງສຸດຂອງມັນ, ເນື່ອງຈາກວ່າມັນຈະບໍ່ຢູ່ໃນການໄຫຼປົກກະຕິຂອງເອກະສານ.
ອົງປະກອບໃນຫນ້າເວັບມັກຈະຖືກນໍາໃຊ້ເພື່ອກໍານົດມູນຄ່າຂອງຕໍາແຫນ່ງ: ທຽບເທົ່າກັບບໍ່ມີມູນຄ່າຊົດເຊີຍທີ່ກໍານົດໄວ້, ຊຶ່ງຫມາຍຄວາມວ່າອົງປະກອບຍັງຄົງຢູ່ບ່ອນທີ່ມັນຈະປາກົດຢູ່ໃນການໄຫຼປົກກະຕິ. ນີ້ແມ່ນເຮັດພຽງແຕ່ເພື່ອສ້າງອົງປະກອບທີ່ເປັນສະພາບການຕໍ່ກັບສິ່ງທີ່ອົງປະກອບອື່ນໆສາມາດຕັ້ງຕໍາແຫນ່ງຢ່າງແທ້ຈິງໄດ້. ຕົວຢ່າງ: ຖ້າທ່ານມີກໍາແພງຮອບເວັບໄຊທ໌ຂອງທ່ານທັງຫມົດທີ່ມີຄ່າຂອງຊັ້ນຂອງ "ບ່ອນເກັບ" (ຊຶ່ງເປັນສະຖານະການທົ່ວໄປໃນການອອກແບບເວັບໄຊຕ໌), ການແບ່ງນີ້ສາມາດຖືກຕັ້ງໃຫ້ເປັນຕໍາແຫນ່ງຂອງຍາດພີ່ນ້ອງເພື່ອວ່າສິ່ງທີ່ຢູ່ໃນມັນສາມາດໃຊ້ ມັນເປັນສະພາບການຕໍາແຫນ່ງ.
ສິ່ງທີ່ກ່ຽວກັບຕໍາແຫນ່ງທີ່ຖືກຕ້ອງ?
ຕໍາແຫນ່ງຄົງທີ່ແມ່ນຄ້າຍຄືກັບຕໍາແຫນ່ງຢ່າງແທ້ຈິງ. ຕໍາແຫນ່ງຂອງອົງປະກອບແມ່ນຄິດໄລ່ໃນແບບດຽວກັນກັບຕົວແບບຢ່າງແທ້ຈິງ, ແຕ່ວ່າອົງປະກອບຄົງຈະຖືກແກ້ໄຂຢູ່ໃນສະຖານທີ່ນັ້ນ - ເກືອບຄືກັບ watermark . ທຸກສິ່ງທຸກຢ່າງທີ່ຢູ່ໃນຫນ້ານັ້ນຈະເລື່ອນພາບສ່ວນທີ່ເຫຼືອຜ່ານມາ.
ການນໍາໃຊ້ມູນຄ່າຊັບສິນນີ້, ທ່ານຈະກໍານົດ:
ຕໍາແຫນ່ງ: fixedຈື່ໄວ້, ເມື່ອທ່ານແກ້ໄຂອົງປະກອບທີ່ຢູ່ໃນເວັບໄຊທ໌ຂອງທ່ານ, ມັນຈະພິມຢູ່ໃນສະຖານທີ່ນັ້ນເມື່ອພິມຫນ້າເວັບຂອງທ່ານ. ຕົວຢ່າງ: ຖ້າອົງປະກອບຂອງທ່ານຖືກແກ້ໄຂຢູ່ເທິງສຸດຂອງຫນ້າເວັບ, ມັນຈະປາກົດຢູ່ເທິງສຸດຂອງທຸກຫນ້າພິມ - ເນື່ອງຈາກມັນຖືກແກ້ໄຂຢູ່ເທິງສຸດຂອງຫນ້າ. ທ່ານສາມາດໃຊ້ປະເພດສື່ມວນຊົນເພື່ອປ່ຽນວິທີການສະແດງ ຫນ້າທີ່ຖືກພິມ ສະແດງອົງປະກອບທີ່ມີກໍານົດ:
@media screen {h1 # first {position: fixed }} @media print {h1 # first {position: static }}ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ໃນວັນທີ 1/7/16.