CSS中position的4種定位詳解

2021-07-31 18:02:31 字數 415 閱讀 4480

大家都知道,css中的position有4種取值,分別是static、fixed、relative、absolute。

詳細解釋:

static:相當於沒有定位,元素會出現在正常的文件流中。

fixed:元素框的表現類似於absolute,但是fixed是相對於視窗本身,也就是瀏覽器視窗而定位的。所以,採用該定位的元素在頁面下拉的時候,其位置並不會發生變化。

relative:生成相對定位的元素,相對於元素本身的位置進行定位,它原本所佔的空間仍然會保留。

absolute:生成絕對定位的元素,相對於static定位以外的第乙個有定位的祖先元素進行定位。由於static定位相當於沒有定位,所以absolute定位實際上就是相對於有定位的第乙個祖先元素定位,如果所有的祖先元素都沒有定位,則相對於初始包含塊或者畫布,一般就是body元素定位。

css4種布局技巧 position

position static relative absolute fixed inherit absolute 絕對定位 脫離文件流的布局,遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相對定位 文件流的布局...

css中定位position的四種屬性

position relative absolute static fixed static 自動定位,自動定位就是元素在頁 面普通文件流中由html自動定位,普通文件裡中的元素也稱為流動元素。不能通過z index進行層次分級。relative 相對定位,相對定位不脫離文件流,參考其在原來文件流中...

關於css中的position

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