絕對定位和相對定位

2022-07-08 20:48:15 字數 1091 閱讀 7686

position 屬性規定元素的定位型別。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

position:relative | absolute | fixed | static | inherit

1.static 為預設值,無特殊定位,按照正常的文件流進行排列。

注意:當position為static時,定義top,left,bottom,right是不起作用的。

2.absolute 物件將脫離文件流,不再佔據元素在文件中的正常位置。它的偏移位置是以最近已定位的祖先元素作為參照,如果沒有已定位的祖先元素,則以頂級元素作為參照。

3.relative 元素不會脫離文件流,仍然佔據原來的空間,它的偏移位置會以自身的佔位空間作為參照。可以通過設定margin-top、margin-bottom為負值,來改變它在佔位空間中的高度。

3. fixed 是特殊的absolute,會脫離文件流,總是以body為定位物件的,按照瀏覽器的視窗進行定位。

絕對定位——元素會脫離文件流,它的偏移位置是以最近已定位的祖先元素作為參照,如果沒有已定位的祖先元素,則以頂級元素作為參照。可以通過index來控制層級。

相對定位——元素不會脫離文件流,仍然佔據原來的空間,它的偏移位置會以自身的佔位空間作為參照。可以通過設定margin-top、margin-bottom為負值,來改變它在佔位空間中的高度。

小結1.一般父級元素使用相對定位,子級元素使用絕對定位。

2.對於相對定位元素,left、right、top、bottom屬性與margin屬性混合使用會產生累加效果。

3.對於絕對定位元素,left、right、top、bottom屬性與margin屬性混合使用,偏移方向相同累加,方向相反margin值無效。

4.對於絕對定位元素,使用margin值進行布局時,不管它有沒有已經定位的祖先元素,都會以它原來所在文件流中的位置作為參照。此時margin-top、margin-bottom不再對文件流中的元素產生影響,因為該元素已經脫離了文件流。

5.對於絕對定位元素和浮動元素,設定display:inline/block均無效,因為此時元素預設以display:inline-block顯示。

絕對定位和相對定位

換了乙個新工作,一上來就是改前台web頁面之類的東西,工作這麼久以來web css之類的只是皮毛級應用,知之勝少,搞乙個css定位之類的東西還讓我費了好大一番勁,丟人啊。研究了以下,稍微總結一下吧。絕對定位和相對定位 這裡以div容器為例 1 相對定位 元素框偏移某個距離。元素仍保持其未定位前的形狀...

相對定位和絕對定位

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

絕對定位和相對定位

css的相對定位和絕對定位 通常情況下,我們元素的position屬性的值預設為static 就是沒有定位,元素出現在正常的文件流中,這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設定乙個距離左邊距偏移100px的宣告 left 10...