|
實例 定位h2 元素: h2 { position:absolute; left:100px; top:150px; }親自試一試
瀏覽器支持IE | Firefox | Chrome | Safari | Opera | | | | | |
所有主流瀏覽器都支持position 屬性。 註釋:任何的版本的Internet Explorer (包括IE8)都不支持屬性值"inherit"。
定義和用法position 屬性規定元素的定位類型。 說明這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。 默認值: | static | 繼承性: | no | 版本: | CSS2 | JavaScript 語法: | object .style.position="absolute" |
可能的值值 | 描述 | 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。
|
|