CSS基礎學習之絕對定位和相對定位

2021-07-02 00:40:13 字數 622 閱讀 6833

序號

有無trbl

有無父級

有無文字

有無position1無

無無無2

無無有無

3有無無有4有

有無有5

有padding

無relative6有

padding,absolute無無

7有有無

absolute8有

absolute

無absolute9有

relative

無absolute

補充:所有的元素預設定位是position:absolute。

結果:1、定位相對於瀏覽器的左上角。

2、在文字後,緊靠左邊,不覆蓋文字。

3、父級沒有position,則相對於瀏覽器的左上角。

4、父級的position(absolute&&relative),相對於父級的左上角。

備註:父級的padding對其不起作用。

5、是padding和trbl綜合的結果。

6、和5的效果是一樣的。

7、子級元素會脫離父級元素。

8、父級元素會定位於瀏覽器左上角,子集定位於父級。

9、5和9區別:9會浮在內容上,5後的內容會在5後面。

CSS 相對定位和絕對定位

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

css 絕對定位和相對定位

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

css絕對定位和相對定位

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