Position 絕對定位和相對定位

2021-05-22 02:56:33 字數 1558 閱讀 4296

position絕對定位和相對定位

css中絕對定位和相對定位即position屬性

position :static /absolute / fixed / relative

static:

靜態absolute:絕對定位fixed:固定relative:相對定位

static :

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

absolute :

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

relative :

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

fixed :e5.5

及ns6尚不支援此

一般最實用的就是絕對定位(absolute)和相對定位(relative)

絕對定位(absolute):給予此定位方法的物件將會被從文件流中拖出,然後使用left;right;top;bottom(四個至少有乙個存在具體的值)等屬性相對與其最接近的乙個最有定位設定的父級物件進行絕對定位,如果父級物件沒有設定定位屬性,那麼將遵循html的定位規,以body的左上角為參考進行定位。絕對定位的物件可以重疊,層疊的順序可以通過z-index屬性進行控制,z-index的值是無單位的整數,大的在上面,其值可以為負。(目前ff不支援z-index的值為負)

僅使用margin屬性進行絕對定位元素的情況時,margin-bottom 和margin-right的值不再對文件流中的元素產生影響,因為該元素已經脫離了文件流。另外,不管它的祖先元素有沒有定位,都是以文件流中原來所在的位置上偏移參照物。

相對定位(relative):物件不可以層疊,依據left;right;top;bottom(四個至少有乙個存在具體的值)等屬性在正常文件流中偏移自身位置。同樣可以用z-index分層設計。(簡單的說就是相對與自己定位的)

混合使用left、right、top和bottom屬性與margin屬性進行相對定位元素的時候margin屬性和top、bottom、left、right屬性同時使用,如果同一方向偏移,它們的值會產生累加的效果。

絕對定位和相對定位的累加加效果不同,如果top、bottom、left、right屬性和margin屬性偏移的方向相反,top、bottom、left、right屬性值有效,反方向的margin屬性值無效。

總結:相對定位的元素不會脫離文件流,占用文件流的空間,left; right; top和bottom屬性與margin屬性混合使用會產生累加效果。

絕對定位的元素脫離文件流,偏移不影響文件流中的其它元素,left; right; top和bottom屬性與margin屬性混合使用,偏移方向相同值累加,方向相反,margin屬性值無效。

絕對定位的元素以最近的定位祖先元素為參照物。

澄星網路****

專注品牌**設計

傳真:029-62803091 qq

position 相對定位和絕對定位

定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進行移動。再一點,相對定位時,無論是否進行移動,元素仍然...

定位屬性position,相對定位,絕對定位

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

CSS之Position相對定位和絕對定位

absolute的英文意思是絕對的意思,實際上是針對父級元素元素定位,如果父級元素沒有position relative absolute,則追至再上乙個父級元素,直至相對於文件的左上角定位,按照我們中國人的理解觀念,這個其實是相對定位,是脫離文件流的。用了abolute屬性,原有float屬性將失...