關於 position 屬性

出自六年制學程
在2019年1月3日 (四) 18:18由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

靜態 static

<div style='position:static;'>

static 是預設值。任何套用 position:static; 的元素「不會被特別定位」在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上,所有其他的屬性值都代表該元素會被定位在頁面上。

</div>

相對 relative

<div style='position:relative;'>

relative 表現的和 static 一樣,除非你增加了一些額外的屬性。

</div>

<div style='position:relative;width:600px;top:-20px;left:20px;'>

在一個設定為 position: relative 的元素內設定 toprightbottomleft 屬性,會使其元素「相對地」調整其原本該出現的所在位置,而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間,都不會影響到原本其他元素所在的位置。

</div>

fixed 固定於瀏覽器座標

請看右下角的示範

<div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;'>

固定於瀏覽器的右下角。固定定位元素不會保留它原本在頁面應有的空間,不會跟其他元素的配置互相干擾。

</div>

absolute 定位於上層容器