WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞
網頁設計基礎課程目錄

3-12. position 定位類屬性

NO 屬性 說明 CSS3 英文參考網 簡中參考網
1 position 設定框架的定位模式,有5種模式 (參考下方介紹)。   w3schools runoob
2 top 框架有定位能力時設定上方與父層的距離。   w3schools runoob
3 right 框架有定位能力時設定右側與父層的距離。   w3schools runoob
4 bottom 框架有定位能力時設定下方與父層的距離。   w3schools runoob
5 left 框架有定位能力時設定左側與父層的距離。   w3schools runoob
6 z-index 框架有定位能力時設定重疊前後的層級。   w3schools runoob

position 的5種模式:

屬性名稱 屬性值 (字譯)名稱 說明
position fixed 固定領域定位 固定在畫面上, 不會被捲動移走, 座標相對到視窗
  sticky 粘性定位 一開始物件在下方跟著視窗往上捲動, 移到指定位置時即固定粘住
  absolute 絕對領域定位 物件的領域是絕對性的, 不會被前後物件推動, 原則上座標相對到父層
  relative 相對領域定位 與前後物件是相依相對性的, 可以運用上下左右相對於自己的位置移動
  static 靜態定位 這是每個元素預設的position, 這個預設值代表的是沒有定位能力的