通過設置CSS position 屬性來固定層的位置

定義和用法

position 屬性規定元素的定位類型。

說明

這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對於它在正常流中的默認位置偏移。

默認值：	static
繼承性：	no
版本：	CSS2
JavaScript 語法：	object.style.position="absolute"

實例

定位 h2 元素：

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

TIY

瀏覽器支持

所有主流瀏覽器都支持 position 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

可能的值

值	描述
absolute	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

TIY 實例

定位：相對定位

本例演示如何相對於一個元素的正常位置來對其定位。

定位：絕對定位

本例演示如何使用絕對值來對元素進行定位。

定位：固定定位

本例演示如何相對於瀏覽器窗口來對元素進行定位。

設置元素的形狀

本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，並顯示出來。

Z-index

Z-index可被用於將在一個元素放置於另一元素之后。

Z-index

上面的例子中的元素已經更改了Z-index。

相關頁面

CSS 教程：CSS 定位

HTML DOM 參考手冊：position 屬性

CSS 參考手冊