CSS的相對定位和絕對定位(position)

2022-10-10 19:12:09 字數 2882 閱讀 9748

定位(position),故名思議,就是確定元素在頁面中的位置。

css的常用定位有兩種,一種是相對定位,一種是絕對定位。

下面我們看例子

id="div0">

id="div1">

id="div2">

有三個div,其中乙個大的#div0,裡面含有兩個子div#div1#div2

可以看到,大的黃色#div0,巢狀了乙個灰色的#div1和乙個藍色的#div2

由於div塊級元素,所以灰色黃色div不會在同一排顯示。

這個時候,我們給#div1,設定相對定位

當我們給灰色的#div1做了相對定位之後,#div1相對於自己原來的位置做了移動。

但是其他的元素#div0#div2的位置都沒有發生變化,也就是說,給元素做了相對定位之後,其他元素不受影響,還認為該元素,在其原來的位置。

我們再給#div1改成絕對定位

這時發現,原來的黃色#div0坍塌了,這是因為,絕對定位,同樣會產生類似於float的脫離文件流絕對定位的元素,與其他元素不在同一層面,處於其他元素的上方。

當父元素#div0無定位時候,絕對定位是相對於html文件來做的定位,與其父元素無關。

當我們給父div設定乙個定位後(絕對定位/相對定位都可以),情況又發生了改變

從圖上可以清楚的看到,#div1的位置,相對于父元素#div0發生了偏移。

也就是說,當父元素有定位,絕對定位是相對於父元素來做的定位。

現在我們給藍色的#div2也做乙個絕對定位,再來看一下效果。

現在兩個子元素都設定了絕對定位,那麼他們就都處於其他元素的上方,黃色的父div,就在坍塌的只剩下一條線了。

那麼兩個子div,重疊在一起,到底怎樣控制,誰在誰的上面呢?

可以用z-index屬性來控制。

我們給#div1加上z-index屬性

css中,用z-index來設定元素的層級,預設是0,誰的z-index大,誰就在上面

當給#div1設定z-index1後,#div2z-index是預設值0,#div1z-index#div2的大,那麼#div1就在#div2的上方了。

同理,當你給乙個元素的z-index設定為-1時,那麼這個元素就會在文件下面,看不見了。

總結:

相對定位,是相對自己原來位置所做的定位,其他頁面元素不受影響,還認為該元素,在其定位前的地方。

如果父元素沒有定位,那麼絕對定位,是相對於頁面html做的定位。

如果父元素有定位,那麼絕對定位,是相對於其父元素所做的定位。

定位的層級由z-index屬性控制,預設是0,誰大誰在上方。

CSS 相對定位和絕對定位

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

css 絕對定位和相對定位

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

css絕對定位和相對定位

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