關於css中的position定位

2021-09-23 22:08:44 字數 503 閱讀 4149

通常會提到的position有幾種:

position:static 就是標準流定位,是預設設定

position:relative 是相對定位,這個相對是相對於標準流的,所以顯然元素不會脫離標準流。

position:absolute 是絕對定位,元素脫離標準流並且參照父元素進行定位。

position:fixed 是固定定位,元素脫離標準流並且參照視窗進行定位(一般用在標題欄),可以預見到使用單欄布局時,下一行要設定乙個padding-top來撐起fixed定位脫離標準流的部分。

注意關於position:absolute絕對定位,如果父元素是relative相對定位的,那麼子元素絕對定位脫離標準流後會以父元素為起點;

然而如果當父元素沒有設定相對定位,那麼它的位置相對於最初的包含塊。也就是說,如果父元素設定了相對定位,那麼就肯定跟父元素,如果沒有,則它會往上找到上一層設定了position不是static的那個,最後的情況是如果都沒有找到就會歸於body.

關於css中的position

對於position的幾個屬性 static 無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z index屬性定義。此時物件不具有邊距,但仍有補白和邊框 relative 物件不可層疊,但將...

關於CSS中的定位屬性position

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

關於CSS的布局 position屬性

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