關於css中的position

2021-06-03 03:09:07 字數 1064 閱讀 3541

對於position的幾個屬性:

static :  無特殊定位,物件遵循html定位規則

absolute :  將物件從文件流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時物件不具有邊距,但仍有補白和邊框

relative :  物件不可層疊,但將依據left,right,top,bottom等屬性在正常文件流中偏移位置

fixed :  ie5.5及ns6尚不支援此屬性

舉例說明用途:

對於頁面中乙個static的div#demo,我想讓這個#demo裡的乙個div#sub相對於#demo定位在右上角的某個地方。

position的預設值是static,(也就是說對於任意乙個元素,如果沒有定義它的position屬性,那麼它的position:static)

如果你想讓這個#demo裡的乙個div#sub相對於#demo定位在右上角的某個地方,應該給#demo相對定位,#sub絕對定位。

absolute是相對於自己最近的父元素來定位的,如果你不給#demo相對定位,那麼#sub的絕對定位就是相對於body來定位的。

relative是相對於自己來定位的,例如:#demo,這時#demo會在相對於它原來的位置上移50px。

另:relative 不脫離文件流,absolute 脫離文件流。也就是說:relative 的元素儘管表面上看到它偏離了原來的位置,但它實際上在文件流中還是沒變。absolute的元素不僅位置改變了,同時也脫離了文件流。

html**:

">

">

static: 預設值。無特殊定位,物件遵循html定位規則

absolute: 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z-index屬性定義

fixed:未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範

relative:物件不可層疊,但將依據 left,right,top,bottom 等屬性在正常文件流中偏移位置

關於css中的position定位

通常會提到的position有幾種 position static 就是標準流定位,是預設設定 position relative 是相對定位,這個相對是相對於標準流的,所以顯然元素不會脫離標準流。position absolute 是絕對定位,元素脫離標準流並且參照父元素進行定位。position...

關於CSS中的定位屬性position

在布局中時常會遇到一些元素重疊的需求,這個時候就需要考慮使用position定位屬性,此屬性規定某元素以某種特定的方式固定在某個位置上,大部分時候用以處理元素重疊的需求,而不同的定位方式則擁有不同的特性。預設值,相當於沒有定位屬性 相對定位 擁有相對定位方式的元素,會以自身為定位參照,通過left,...

關於CSS的布局 position屬性

position有五個屬性值 relative absolute fixed static inherit,w3school給出了如下的 說明 下面以乙個demo來說明不同屬性值之間的區別以及對於頁面布局的影響 id parent id sub1 sub1div id sub2 sub2div di...