CSS 布局 - position 屬性
- 上一頁 CSS max-width
- 下一頁 CSS z-index
position 屬性規定應用于元素的定位方法的類型（static、relative、fixed、absolute 或 sticky）。
position 屬性
position 屬性規定應用于元素的定位方法的類型。
有五個不同的位置值：
- static
- relative
- fixed
- absolute
- sticky
元素其實是使用 top、bottom、left 和 right 屬性定位的。但是，除非首先設置了 position 屬性，否則這些屬性將不起作用。根據不同的 position 值，它們的工作方式也不同。
position: static;
HTML 元素默認情況下的定位方式為 static（靜態）。
靜態定位的元素不受 top、bottom、left 和 right 屬性的影響。
position: static; 的元素不會以任何特殊方式定位；它始終根據頁面的正常流進行定位：
這是所用的 CSS：
實例
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; 的元素相對于其正常位置進行定位。
設置相對定位的元素的 top、right、bottom 和 left 屬性將導致其偏離其正常位置進行調整。不會對其余內容進行調整來適應元素留下的任何空間。
這是所用的 CSS：
實例
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
position: fixed; 的元素是相對于視口定位的，這意味著即使滾動頁面，它也始終位于同一位置。 top、right、bottom 和 left 屬性用于定位此元素。
固定定位的元素不會在頁面中通常應放置的位置上留出空隙。
請注意頁面右下角的這個固定元素。這是所用的 CSS：
實例
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position: absolute; 的元素相對于最近的定位祖先元素進行定位（而不是相對于視口定位，如 fixed）。
然而，如果絕對定位的元素沒有祖先，它將使用文檔主體（body），并隨頁面滾動一起移動。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
這是一個簡單的例子：
這是所用的 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）。
注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前綴（請參見下面的實例）。您還必須至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。
在此例中，在到達其滾動位置時，sticky 元素將停留在頁面頂部（top: 0）。
實例
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
重疊元素
在對元素進行定位時，它們可以與其他元素重疊。
z-index 屬性指定元素的堆棧順序（哪個元素應放置在其他元素的前面或后面）。
元素可以設置正或負的堆疊順序：
這是一個標題
由于圖像的 z-index 為 -1，所以它位于文本后面。
實例
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
具有較高堆疊順序的元素始終位于具有較低堆疊順序的元素之前。
注意：如果兩個定位的元素重疊而未指定 z-index，則位于 HTML 代碼中最后的元素將顯示在頂部。
定位圖像中的文本
如何在圖片上放置文字：
實例
親自試一試：
更多實例
- 設置元素的形狀
- 本例演示如何設置元素的形狀。元素被裁剪為這種形狀并顯示。
所有 CSS 定位屬性
| 屬性 | 描述 |
|---|---|
| bottom | 設置定位框的底部外邊距邊緣。 |
| clip | 剪裁絕對定位的元素。 |
| left | 設置定位框的左側外邊距邊緣。 |
| position | 規定元素的定位類型。 |
| right | 設置定位框的右側外邊距邊緣。 |
| top | 設置定位框的頂部外邊距邊緣。 |
| z-index | 設置元素的堆疊順序。 |
- 上一頁 CSS max-width
- 下一頁 CSS z-index
