css中絕對定位和相對定位詳解

2022-05-17 07:21:42 字數 896 閱讀 4901

相對定位是標籤在根據沒加position樣式前的位置來定位不會受父級標籤的定位的影響,並且定位後不會脫離文字流,會佔據原來的位置。

接下來直接看**:

執行結果:

接下來將黃色div標籤設定成相對移動:

可以看出黃色div標籤相對於沒加定位前的位置移動了100px,並且原來位置還是佔據著文件流的位置,藍色框並沒有上移。

絕對定位是標籤相對於父級標籤的位置來定位並預設初始位置是未設定定位前的位置,如果父級標籤沒有設定定位,那麼會一層層向上找到定位的標籤,直到body,上面的例子因為三個標籤都是同級的所以會根據body標籤來定位,如果將黃色標籤設定成絕對定位並左移動50px:

這說明黃色標籤已經脫離了文件流,相對於藍色標籤來說黃色標籤不存在,所以藍色標籤會上移,其實這是因為絕對定位帶浮動效果。

通常我們將絕對定位和相對定位結合使用,下面看個例項:

這是怎麼做的的呢,其實這就用到了相對定位和絕對定位,下面演示:

購物車    內容

CSS中的絕對定位和相對定位詳解 CSS

將窗體自上而下分成一行行,並在每行中按從左至右的順序排放元素,即為文件流。只有三種情況會使得元素脫離文件流,分別是 浮動 絕對定位和相對定位。static,無特殊定位,它是html元素預設的定位方式,即我們不設定元素的position屬性時預設的position值就是static,它遵循正常的文件流...

css 中相對定位和絕對定位

1.css中定位機制有三種 標準文件流,浮動,絕對定位 2.絕對定位就屬於第三種定位,用到position屬性,下面就是具體設定 相對定位 相對於自身原有位置 就是普通流的時候 進行偏移 設定top,left.後 仍然處於標準文件流中 隨即擁有偏移屬性和z index屬性 絕對定位 建立了以包含塊為...

詳解CSS的相對定位和絕對定位

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