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, 這個預設值代表的是沒有定位能力的 |