CSS 佈局 - position 屬性
position 屬性指定元素使用的定位方法型別（static、relative、fixed、absolute 或 sticky）。
position 屬性
position 屬性指定元素使用的定位方法型別。
有五種不同的 position 值
staticrelativefixedabsolutesticky
然後使用 top、bottom、left 和 right 屬性來定位元素。但是，除非首先設定了 position 屬性，否則這些屬性將不起作用。它們根據 position 值的工作方式也不同。
position: static;
HTML 元素預設是 static 定位的。
Static 定位的元素不受 top、bottom、left 和 right 屬性的影響。
position: static; 的元素不以任何特殊方式定位；它始終根據頁面正常流進行定位。
使用的 CSS 如下
position: relative;
position: relative; 的元素相對於其正常位置進行定位。
設定相對定位元素的 top、right、bottom 和 left 屬性會使其與正常位置分離。其他內容不會進行調整以適應元素留下的任何空白。
使用的 CSS 如下
position: fixed;
position: fixed; 的元素相對於視口進行定位，這意味著它始終保持在同一位置，即使頁面滾動。top、right、bottom 和 left 屬性用於定位元素。
固定定位的元素不會在其原本位置留下空白。
注意頁面右下角的固定元素。使用的 CSS 如下
示例
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
自己動手試一試 »
position: fixed;position: absolute;
position: absolute; 的元素相對於最近的已定位祖先元素進行定位（而不是相對於視口，如 fixed）。
但是；如果絕對定位的元素沒有已定位的祖先元素，它將使用文件主體，並隨頁面滾動。
注意：絕對定位的元素將從正常流中移除，並且可以與其他元素重疊。
這是一個簡單的例子
使用的 CSS 如下
示例
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
自己動手試一試 »
position: sticky;
具有 position: sticky; 的元素根據使用者的滾動位置進行定位。
粘性元素在 relative 和 fixed 之間切換，具體取決於滾動位置。它相對於視口中的給定偏移位置進行定位，直到達到該位置 - 然後它“粘住”在原地（就像 position:fixed）。
注意：對於粘性定位，您必須至少指定 top、right、bottom 或 left 中的一個。
在此示例中，當您滾動到其滾動位置時，粘性元素會固定在頁面頂部（top: 0）。
示例
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
自己動手試一試 »
在影像中定位文字
如何在影像上定位文字
更多示例
設定元素的形狀
此示例演示瞭如何設定元素的形狀。元素將被裁剪成此形狀並顯示。
所有 CSS 定位屬性
| 屬性 | 描述 |
|---|---|
| bottom | 設定已定位框的底部邊距 |
| clip | 裁剪絕對定位的元素 |
| left | 設定已定位框的左邊距 |
| position | 指定元素的定位型別 |
| right | 設定已定位框的右邊距 |
| top | 設定已定位框的頂部邊距 |
