css的相對定位和絕對定位筆記

2021-08-17 06:48:15 字數 1133 閱讀 1514

html**如下:

關於絕對定位:

圖一:div2:position:absolute;

div1無操作。

圖二:div2 div2:position:absolute;

兩圖對比,1,使用絕對定位的盒子以她的「最近」的乙個「已經定位」的「祖先元素」為基準進行定位,如果沒有已經定位的祖先元素,那麼會以瀏覽器視窗為基準進行定位。(所謂已經定位的元素含義是,position屬性被設定。)

2,絕對定位的框從標準流中脫離,這意味著他們對其他的兄弟盒子的定位沒有影響。例如

給div加乙個padding:30px 30px;(不受padding的影響)

關於相對定位:

圖三:div1 未設定,div2:position:relative;

(如果設定了trbl,並且父級沒有設定position屬性,子元素仍舊以父級的左上角為原點進行定位(這和absolute不同))

圖四:div1:position:absolute;

div2:position:relative;

(設定trbl,並且父級設定position屬性(無論是absolute還是relative),都以父級左上角為原點進行定位,位置由trbl決定。

若父級有設定padding,那麼就以內容區的左上角為原點進行定位(這一點和absolute又不一樣。))

由圖三圖四總結出,相對定位總是以父級左上角為原點進行定位的,如果父級不存在,則以瀏覽器左上角進行定位。

CSS 相對定位和絕對定位

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

css 絕對定位和相對定位

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

css絕對定位和相對定位

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