position

語法:

positionstatic | relative | absolute | fixed | sticky

預設值static

適用於:除display屬性定義為table-column-group | table-column之外的所有元素

繼承性:無

動畫性:否

計算值:指定值

媒 體:視覺

取值:

static:
物件遵循常規流。此時4個定位偏移屬性不會被應用。
relative:
物件遵循常規流,並且參照自身在常規流中的位置通過toprightbottomleft這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。
absolute:
物件脫離常規流,此時偏移屬性參照的是離自身最近的定位祖先元素,如果沒有定位的祖先元素,則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素,其margin不與其他任何margin折疊。
fixed:
absolute一致,但偏移定位是以視窗為參考。當出現滾動條時,物件不會隨著滾動。
sticky:
物件在常態時遵循常規流。它就像是relativefixed的合體,當在螢幕中時按常規流排版,當卷動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。(CSS3)

說明:

用於指定一個元素在檔案中的定位方式
  • position的值為非static時,其層疊級別通過z-index屬性定義。
  • 絕對定位的元素,在toprightbottomleft屬性未設定時,會緊隨在其前面的兄弟元素之後,但在位置上不影響常規流中的任何元素。用這個特性你或許會干這樣的事:demo
  • 對應的腳本特性為position

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+#1 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
fixed
sticky 15.0 40.0-58.0 #2 55.0 8.0-11.0-webkit- 41.0 8.0-11.3-webkit- 55.0 55.0
16.0+ 56.0-64.0 #3 42.0-50.0 #3 56.0-62.0 #3 56.0-64.0 #3
  1. IE如果在 quirks mode下將不支援;
  2. Firefox40.0-58.0 不支援將該值應用到任何table相關的元素上,詳細
  3. Chrome56.0-64.0 不支援將該值應用到theadtr元素上,詳細

示例: