絕對定位和相對定位

2021-10-09 10:34:20 字數 964 閱讀 1208

特點:(務必記住)

相對於 自己原來在標準流中位置來移動的 原來在標準流的區域繼續占有,後面的盒子仍然以標準流的方式對待它。

影響:設定後,原來的位置始終保留著

效果圖

1.完全脫標 —— 完全不佔位置;

2.父元素沒有定位,則以瀏覽器為準定位(document 文件)。

效果圖

3. 父元素要有定位

將元素依據最近的已經定位(絕對、固定或相對定位)的父元素(祖先)進行定位。

效果圖

特點:(務必記住)

絕對是以帶有定位的父級元素來移動位置 (拼爹型) 如果父級都沒有定位,則以瀏覽器文件為準 移動位置 不保留原來的位置,完全是脫標的。

影響設定後,原來的位置會被後面的內容佔據

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

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

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

第一,不管是什麼,既然要定位,就需要有乙個參照物

相對定位的參照物是本身。

絕對定位的參照物就是父級元素,當父級元素中不存在相對定位,那麼它的參照物就是body

絕對定位和相對定位

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

相對定位和絕對定位

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

絕對定位和相對定位

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