ລັກສະນະ position Style

ການກໍານົດແລະການນໍາໃຊ້

position ການຕັ້ງກິດຂອງບັນດາລັກສະນະຂອງສິ່ງທີ່ຕັ້ງກິດຂອງບັນດາອັນຕະລາງ (ສະພາບ: ສະພາບສະພາບ, ສະພາບສະພາບ, ສະພາບສະພາບ, ສະພາບສະພາບ).

ບໍ່ບໍ່ບຸກຄົນ

CSS ອົງການສອນCSS ການຕັ້ງກິດ

CSS ອີງຕາມຄູ່ມູນposition 属性

实例

例子 1

将

元素的定位从相对定位更改为绝对定位：

document.getElementById("myDIV").style.position = "absolute";

ທົດລອງດີເດັນນິຍົມ

ຕົວຢ່າງ 2

ການຈັດກົດລະບຽບສະຖານະທີ່ທີ່ຫລາກຫລືຫລິງ:

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

ທົດລອງດີເດັນນິຍົມ

ຕົວຢ່າງ 3

ກັບຄືນ <h2> ສະຖານະທີ່ຈັດກົດລະບຽບ:

alert(document.getElementById("myH2").style.position);

ທົດລອງດີເດັນນິຍົມ

ຂໍ້ຄວາມພາສາ

ການກັບຄືນສະຖານະທີ່ position:

object.style.position

ການກະກຽມສະຖານະທີ່ position:

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

ຄວາມຜິດພາດຂອງປະສົມປະກອບ

ຄວາມຜິດພາດ ການອະທິບາຍ
static ສະຖານະທີ່ຈັດກົດລະບຽບຕາມຕົວເກາະທີ່ຈະສະແດງຕາມລຳດັບທີ່ຈະສະແດງພາຍໃນບັນນາທິການ. ຄາດກໍານົດແບບມາດຕະຫລາດ.
absolute ສະຖານະທີ່ຈັດກົດລະບຽບຕາມຕົວເກາະທີ່ພົບພາຍໃນປະຕູວຽງທີ່ຈັດກົດລະບຽບຈະຢູ່ນັ້ນ.
fixed ສະຖານະທີ່ຈັດກົດລະບຽບຕາມຕົວເກາະທີ່ພົບພາຍໃນປະຕູວຽງຈາກປະຕູວຽງທີ່ຈັດກົດລະບຽບຈະຢູ່ນັ້ນ.
relative

ສະຖານະທີ່ຈັດກົດລະບຽບຕາມຕົວເກາະທີ່ຕາມຕົວເກາະຈົນກວ່າສະແດງຈະຢູ່.

ດັ່ງນັ້ນ "left:20" ຈະເພີ່ມຕົວເກາະຊ່ວຍຂອງສະຖານະທີ່ສະແດງຈະຢູ່ 20 ຕີ.
sticky

ສະຖານະທີ່ຈັດກົດລະບຽບຕາມຕົວເກາະທີ່ບັນທຶກຕົວເກາະຈາກຜູ້ນຳໃຊ້.

ສະຖານະທີ່ພາຍໃນການຈັດກົດລະບຽບ sticky ຈະປ່ຽນລະບຽບລະບຽບ relative ແລະ fixed ຕາມຕົວເກາະທີ່ບັນທຶກຕົວເກາະ.

ມັນເປັນສະຖານະພາຍໃນການຈັດກົດລະບຽບສະຖານະທີ່ຕາມຕົວເກາະຈົນກວ່າມັນພົບກັບຕົວເກາະທີ່ກໍານົດ. ຫລັງຈາກນັ້ນມັນ "ຢູ່" ຢູ່ຕົວເກາະທີ່ຕາມການ.

ຄວາມຄິດຫາ:ບໍ່ສາມາດສະໜັບສະໜູນ IE/Edge 15 ຫລືເກົ່ານາທິການ. Safari ສະໜັບສະໜູນ ສານການຄົ້ນຫາ Webkit ຕັ້ງແຕ່ຮູບແບບ 6.1.
initial ການຍິນຍອມຄັດດັ່ງກ່າວສຳລັບປະສົມປະກອບທີ່ພົບພາຍໃນປະກອບປົກກະຕິ. ບັນຈຸນາທິການ. initial。
inherit ການຍິນຍອມຄັດດັ່ງກ່າວສຳລັບປະສົມປະກອບທີ່ພົບພາຍໃນປະກອບປົກກະຕິ. ບັນຈຸບັນນາທິການ. inherit。

ຂໍ້ສົມບູນດ້ານເຕັກນິກ.

ຄວາມຜິດພາດມາດຕະຫລາດຄຳຕອບກັບຄວາມຜິດພາດຈະຢູ່ນີ້: static
ຄຳຕອບກັບຄວາມຜິດພາດຈະຢູ່ນີ້: ສະແນນຫົວໜ້າທີ່ຊີ້ແຈງລັກສະນະລາຍການອັນຕິດຕາມລິການທີ່ສະແດງເບື້ອງຕົ້ນ.
CSS ຮູບແບບ： CSS2

ການສະໜັບສະໜູນບັນດາຄົນນັກບັນນາທິການ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ