首頁 > web前端 > js教程 > 主體

透過設定CSS中的position屬性來固定層的位置_javascript技巧

WBOY
發布: 2016-05-16 15:25:54
原創
1284 人瀏覽過

定義與用法

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

說明

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

默认值: static
继承性: no
版本: CSS2
JavaScript 语法: object.style.position="absolute"

實例

定位 h2 元素:

h2
 {
 position:absolute;
 left:100px;
 top:150px;
 }
TIY
登入後複製

瀏覽器支援

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

註解:任何的版本的 Internet Explorer (包括 IE8)都不支援屬性值 "inherit"。

可能的值

TIY 實例

描述
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 属性的值。
產生絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。

元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed

產生絕對定位的元素,相對於瀏覽器視窗進行定位。 元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative

產生相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會在元素的 LEFT 位置加入 20 像素。

static 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或 z-index 宣告)。
inherit 規定應該從父元素繼承 position 屬性的值。

 定位:相對定位本例示範如何相對於一個元素的正常位置來對其定位。定位:絕對定位本例示範如何使用絕對值來定位元素。定位:固定定位本例示範如何相對於瀏覽器視窗來定位元素。設定元素的形狀本例示範如何設定元素的形狀。此元素被剪裁到這個形狀內,並顯示出來。 Z-indexZ-index可用於將在一個元素放置於另一元素之後。 Z-index上面的例子中的元素已經更改了Z-index。

下面要跟大家介紹CSS中的Position屬性

CSS的Position很重要,有以下幾個值:static,relative,absolute,fixed。
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
登入後複製
Static:靜態定位。如果你沒有設定position屬性,那麼預設就是static。 top,left,bottom,right等屬性,在static的情況下是無效的,要使用這些屬性,必須把position設定為其他三個值之一。
Relative:相對定位。元素將按照靜態定位時的位置進行調整,在靜態定位中分配給元素的空間仍然會分配給它,它兩邊的元素不會向它靠近來填充那個空間,但它們也不會從元素的新位置被擠走。 Absolute:絕對定位。元素將按照包含它的元素的位置進行調整,例如它嵌套在另一個絕對定位的元素中,那麼就相對於那個元素定位。 Fixed:固定定位。元素將被設定在瀏覽器上一個固定位置上,不會隨其他元素滾動。圖像點說,上下拉動捲軸的時候,fixed的元素在螢幕上的位置不變。需要注意的是IE6並不支援此屬性。 注意:很多網頁都是居中的,這樣,當對元素進行絕對定位的時候,在不同的分辨率下顯示會有偏差,這時,我們可以通過類似下面的方法來處理:
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!