top
Loading...
CSS Position(定位)

CSS Position(定位)


position 屬性指定了元素的定位類型。

position 屬性的五個值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的頂部,底部,左側和右側屬性定位。然而,這些屬性無法工作,除非是先設定position屬性。他們也有不同的工作方式,這取決於定位方法。


static 定位

HTML元素的默認值,即沒有定位,元素出現在正常的流中。

靜態定位的元素不會受到 top, bottom, left, right影響。

實例

div.static { position: static; border: 3px solid #73AD21; }

嘗試一下 »

fixed 定位

元素的位置相對於瀏覽器窗口是固定位置。

即使窗口是滾動的它也不會移動:

實例

p.pos_fixed { position:fixed; top:30px; right:5px; }

嘗試一下 »

注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置與文檔流無關,因此不佔據空間。

Fixed定位的元素和其他元素重叠。


relative 定位

相對定位元素的定位是相對其正常位置。

實例

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

嘗試一下 »

移動相對定位元素,但它原本所佔的空間不會改變。

實例

h2.pos_top { position:relative; top:-50px; }

嘗試一下 »

相對定位元素經常被用來作為絕對定位元素的容器塊。


absolute 定位

絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那么它的位置相對於<html>:

實例

h2 { position:absolute; left:100px; top:150px; }

嘗試一下 »

absolute 定位使元素的位置與文檔流無關,因此不佔據空間。

absolute 定位的元素和其他元素重叠。


sticky 定位

sticky 英文字面意思是粘,粘貼,所以可以把它稱之為粘性定位。

position: sticky; 基於用戶的滾動位置來定位。

粘性定位的元素是依賴於用戶的滾動,在 position:relativeposition:fixed 定位之間切換。

它的行為就像 position:relative; 而當頁面滾動超出目標區域時,它的表現就像 position:fixed;,它會固定在目標位置。

元素定位表現為在跨越特定閾值前為相對定位,之後為固定定位。

這個特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生傚。否則其行為與相對定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實例)。

實例

div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }

嘗試一下 »

重叠的元素

元素的定位與文檔流無關,所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個元素的堆叠順序(哪個元素應該放在前面,或後面)

一個元素可以有正數或負數的堆叠順序:

實例

img { position:absolute; left:0px; top:0px; z-index:-1; }

嘗試一下 »

具有更高堆叠順序的元素總是在較低的堆叠順序元素的前面。

注意: 如果兩個定位元素重叠,沒有指定z - index,最後定位在HTML代碼中的元素將被顯示在最前面。


更多實例

裁剪元素的外形

此示例演示如何設置元素的外形。該元素被剪裁成這種形狀,併顯示出來。

如何使用滾動條來顯示元素內溢出的內容

這個例子演示了overflow屬性創建一個滾動條,當一個元素的內容在指定的區域過大時如何設置以適應。

如何設置瀏覽器自動溢出處理

這個例子演示了如何設置瀏覽器來自動處理溢出。

更改光標

這個例子演示了如何改變光標。


所有的CSS定位屬性

"CSS" 列中的數字表示哪個CSS(CSS1 或者CSS2)版本定義了該屬性。

屬性 說明 CSS
bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 auto
length
%
inherit
2
clip 剪輯一個絕對定位的元素 shape
auto
inherit
2
cursor 顯示光標移動到指定的類型 url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 auto
length
%
inherit
2
overflow
設置當元素的內容溢出其區域時發生的事情。 auto
hidden
scroll
visible
inherit
2
overflow-y
指定如何處理頂部/底部邊緣的內容溢出元素的內容區域 auto
hidden
scroll
visible
no-display
no-content
2
overflow-x
指定如何處理右邊/左邊邊緣的內容溢出元素的內容區域 auto
hidden
scroll
visible
no-display
no-content
2
position 指定元素的定位類型 absolute
fixed
relative
static
inherit
2
right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 auto
length
%
inherit
2
top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 auto
length
%
inherit
2
z-index 設置元素的堆叠順序 number
auto
inherit
2
北斗有巢氏 有巢氏北斗