css 中相對定位和絕對定位

2022-08-26 17:54:10 字數 1816 閱讀 3721

1. css中定位機制有三種: 標準文件流, 浮動, 絕對定位

2. 絕對定位就屬於第三種定位, 用到position屬性, 下面就是具體設定

相對定位:

相對於自身原有位置(就是普通流的時候)進行偏移(設定top, left...後)

仍然處於標準文件流中

隨即擁有偏移屬性和z-index屬性

絕對定位: 

建立了以包含塊為基準的定位

完全脫離了標準文件流

隨即擁有偏移屬性和z-index屬性

3.  先上示例**

祖先元素設定了定位

祖先元素沒有設定定位

4.總結: 絕對定位時偏移參考物:

無已定位的祖先元素(包裹它的所有層都沒有設定position屬性): 以為偏移參照物

有已定位的祖先元素: 以距其最近的已定位的祖先元素為偏移參照基準

CSS 相對定位和絕對定位

1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進行移動。再一點,相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其他框 2.position absolut...

css 絕對定位和相對定位

絕對定位指的是通過規定html元素在水平和垂直方向上的位置來固定元素,基於絕對定位的元素不佔據空間。絕對定位的位置宣告是相對於已定位的並且包含關係最近的祖先元素。如果當前需要被定位的元素沒有已定位的祖先元素做參考值,則相對於整個網頁。例項1 該段落是相對於頁面定位,距離頁面的頂部100畫素,距離左邊...

css絕對定位和相對定位

定位是用來改變自己的位置的,誰要改變就確定原來自己的位置是relative還是absolute 相對定位 相對嘛,要有乙個參照物,但這個參照不是別的,是它自己呢,也就是說沒設相對定位的位置,那你會問了,設沒設都在那個位置為什麼要設呢,因為只有設定了才能使 top,left這些生效,也就是設了才能相對...