快速了解CSS絕對定位和相對定位

2021-10-14 03:41:21 字數 1203 閱讀 8913

我們都知道css定位有很多,今天我們來簡單了解絕對定位(absolute)和相對定位(relative)

1絕對定位(absolute)

絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於html:

h2

2相對定位(relative)相對定位元素經常被用來作為絕對定位元素的容器塊。

h2.pos_top

下邊我們用乙個例項來舉例說明

>

class

="conter"

>

aaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

class

="boxs"

>

aaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/>

class

="box1"

>

div>

div>

div>

執行圖

加上絕對定位後

CSS之Position相對定位和絕對定位

absolute的英文意思是絕對的意思,實際上是針對父級元素元素定位,如果父級元素沒有position relative absolute,則追至再上乙個父級元素,直至相對於文件的左上角定位,按照我們中國人的理解觀念,這個其實是相對定位,是脫離文件流的。用了abolute屬性,原有float屬性將失...

CSS 相對定位和絕對定位

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

css 絕對定位和相對定位

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