css中絕對定位和相對定位是什麼意思?通常都是怎

2021-03-07 07:39:55 字數 5637 閱讀 4203

1樓:很多很多

1、新建乙個html檔案輸入兩個div標籤,接著使用style屬性,分別給div設定為絕對定位absolute和相對定位relative,讓他們其中全部向左移動20px,向上移動30px的距離:

2、然後儲存檔案開啟瀏覽器看看效果,位置顯示還是比較明顯的:

3、最後解釋下這個結果,絕對位置就是對瀏覽器頁面左邊和頂部的距離,相對位置就是距離正常的標題的距離。以上就是css中絕對定位和相對定位的使用方法:

2樓:河東陳彬

我們看圖中是乙個相對定位的元素

#first

而下方是一塊預設定位的黑色區塊

#second

我們看到這個處在文字流的區塊被上面的相對定位擋住了一部分,這說明:「當元素被設定相對定位或是絕對定位後,將自動產生層疊,他們的層疊級別自然的高於

文字流」。除非設定其z-index值為負值。並且我們發現當相對定位元素進行位移後,表現內容已經脫離了文字流,只是在本文流中還為原來的相對對定位留

下了原有的總寬與總高(內容的高度或是寬度加上

margin\border\padding的數值)。這說明在相對定位中,雖然表現區脫離了原來的文字流,但是在文字流中還還有此相對定位的老窩。這點

要特別注意,因為在實際應用中如果相對定位的位移數值過大,那麼原有的區域就會形成一塊空白。

並且我們注意,定位元素的座標點是在margin值的左上邊緣點,即圖中的b點。那麼所有的位移的計算將以這個點為基礎進行元素的推動。

2.可以在任意乙個位置的元素(絕對定位)

如上所述:相對定位只可以在文字流中進行位置的上下左右的移動,同樣存在一定的侷限性,雖然他的表現區脫離了文字流,但是在文字流卻依然為其保留了一席之

地,這就好比乙個打工的人他到了外地,但是在老家依然有乙個專屬於他的位置,這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來,如果希望文

本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文字流,而且在文字流中也不會給這個絕對定位元素留下專屬空位。這就好比是乙個工廠裡的職位,如

果有乙個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過trbl來設定元素,使之處在任何乙個位

置。在父層position屬性為預設值時,trbl的座標原點以body的座標原點為起始。看下圖:

上圖可知,文字流中的內容會頂替絕對定位無素的位置,一點都不會客氣。而絕對定位元素自然的層疊於文字流之上。而在單一的絕對定位中,定位元素將會跑到網頁的左上角,因為那裡是他們的被絕對定位後的座標原點。

3.被關聯的絕對定位

上面說的是單一的絕對定位,而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性,但是又希望絕對定位的座標原點可以固定在網頁中的某乙個點,當這個點被移動時絕對位定元素能保證相對於這個原座標的相對位置。也就是說需要這個絕對定位要跟著網頁移動,而並且是因定在網頁的某乙個固定位置。

通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設定為相對定位或是絕對定位。那麼絕對定位的座標就會以父級為座標起始點。

雖然是如此,但是這個座標原點卻並不是父級的座標原點,這是乙個很奇怪的座標位置。我們看一下模型圖示:

我們看到,這個圖中父級為黑灰色區塊,子級為青色區塊。父級是相對定位,子級是絕對定位。子級設定了頂部位移50個畫素,左傾位移50個畫素。

那麼我們看,子級的座標原點並不是從父級的座標原點位移50個畫素,而是從父級塊的padding左上邊緣點為座標起始點(即a

點)。而父級這裡如果要產生位置移動,或是瀏覽器視窗大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。

這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話,相信看完對這裡對定位的解釋一定可以把定位使用得隨心所欲。

實際案例,div在盒子中自適應居中:

3樓:小迷虎兒

絕對定位是相對于父標籤決定位置,一般用於相對定位標籤裡面,js特效經常用到。

相對定位是相對於上乙個相對定位的。一般用於浮動定位標籤裡面,一般跟絕對定位配合使用。

浮動定位才是常用的。

看例子:

以下只說id名代表div

絕對定位:position:absolute

如果bq1(絕對定位)外面沒有div等父標籤,bq1會以body為父標籤。左邊距距body 10畫素,上邊距距body 10畫素。

如果bq4(絕對定位)在bq3(相對定位)裡面,左邊距距bq3 10畫素,上邊距距bq3 10畫素。

相對定位:position:relative

bq2(相對定位)總是相對於前面的同級標籤為基準標籤(bq1)。

bq3以bq2為基準標籤。

4樓:

這個簡單理解的話,有2點內容

第一,不管是什麼,既然要定位,就需要有乙個參照物相對定位的參照物是本身。

絕對定位的參照物就是父級元素,當父級元素中不存在相對定位,那麼它的參照物就是body

第二,產生的影響

相對定位,設定後,原來的位置始終保留著

絕對定位,設定後,原來的位置會被後面的內容佔據一般使用的話,看你需要實現什麼樣的效果,但基本基於上面2點內容來考慮。你稍微用幾次後就會有所體會的

5樓:安徽大科公考

絕對定位和相對定位,都必須找到參照物。

一般參照物,是父元素,根元素,瀏覽器。

沒有參照物,一切都無法定位。記住這一點,對理解定位,很有幫助。

css樣式中如何理解絕對定位和相對定位?

6樓:蝦公尺站長

絕對定位bai就是你的位置已經du不屬於你了zhi,你只能漂浮在半空中dao。

相對定位就是你的位置回你還答占用的,人還在飄著

有意思的是這些都是相對父輩元素有position為相對或者絕對屬性來定位的,都找不到的話就以body視窗來定位。

7樓:天涯々葬

絕對定位和bai相對定位這du

個視情況而定了..

字div和父zhidiv可以用daomargin定位。內div有個很重要的屬性就容是float。。div的浮動屬性。

div層經常會亂跑。所有個人認為在設定div位置時候用相對定位比較好。。

就比如說,子div定位要以父div為參照物

8樓:匿名使用者

絕對定位表示不管是幾級元素,都以瀏覽器上邊框(top),左邊框(left),右邊框(right),下邊框(bottom)來定位..

相對定位,則是以專

上一級父級元屬素為基準來定位.. 所以子div相對父div的定位用什麼當然就要用 position:relative--相對定位了..

margin表示 與上一級元素的上下左右之間留多少空間,如果是在相對定位中,用margin代替也可以,但是,margin的屬性值在各個瀏覽器中是有差異的,所以為了相容性,最還是用 position:relative來相對定位..

絕對定位:position:absolute這個層是相對定位

css絕對定位與相對定位的區別?

9樓:花臂華盛頓

定位方案有四e68a8462616964757a686964616f31333365653930種:靜態定位、相對定位、絕對定位和固定定位。你可以使用css 3中的「position」屬性來決定要使用的定位方式。

在這四種方案中,靜態和相對定為不會影響整個文件布局,而絕對和固定定位則會脫離文件,因此頁面不會為這兩類定位元素預留空間。在預設狀態下,所有元素均是靜態的定位方式,也即這些元素按照原本的從上到下及從左到右的順序進行排布。

只要為該元素設定了「position」屬性,你就可以使用「top」、「right」、「bottom」和「left」這四個屬性來精準定義其應該所在的地方。

在這個示例中,歸屬element類別的元素將相對於其原來所在的位置分別向右和向下移動50個畫素。若在此將「position」的值改為「absolute」或「fixed」,那麼該元素將離最近的已定位的祖先元素的左邊緣和上邊緣分別距離50個畫素。

我們一般使用「left」和「top」這兩個屬性就夠了。如果想要避免元素在定位後,其尺寸會隨著瀏覽器視窗的變化而變化出意想不到的結果,那麼你應該先設定好該元素的大小,然後再定位其左上方的點。

相對定位是相對於正常排列的位置進行偏移,該元素原本所在的位置會被空出來,空出來的部分仍然會影響到後續元素的排列效果。

如上圖所示,position:relative僅僅影響了元素本身,其原有位置被保留,但由於它向右上方進行偏移,因此遮住了第一部分文字的部分區域。

元素是相對於包含它的塊來定義的,這個塊是當前定位元素的父元素或祖先元素。在上例中,即為包含這三個段落的塊。如果對樣式表做一些修改,新增

然後將這三個段落放在id為「pos」的標記內,那麼這三個段落將集體向右偏移50個畫素,而其中的「element」類別的段落將以這個為基準進行偏移——即相對於包含它的塊進行偏移。

除了包含塊以外,還有匿名塊。如果包含塊內同時有塊級元素和巢狀元素,那麼瀏覽器將自動建立匿名塊:

當這兩種元素混雜在一起時,匿名塊能夠讓瀏覽器正確地建立頁面布局。如果將上述的定位方式由「static」改為「relative」,那麼,匿名塊能夠正確地安排其中的巢狀文字和段落。

如果有兩個相對定位的元素以巢狀形式出現,那麼內部的那個元素是相對於外部的——也就是它的父元素來定位,而外部的那個元素是相對於來定位的。

絕對定位

相對定位中的「top」、「right」、「bottom」和「left」被用於設定相對於該元素原本所在位置的偏移量,而絕對定位的這四個屬性則不太一樣。在絕對定位中,「top」指的是被定位元素上方的外邊框和包含塊上方的內邊框之間的距離。換句話說,被定位元素的外邊距和包含塊的邊框會影響top的值,進而影響絕對定位元素的位置,但包含塊的內邊距不會產生任何影響。

在相對定位中,「top」指的是被定位元素上方的外邊框和其原始位置的上邊緣的距離。

「bottom」的含義與「top」差不多,它指的是該定位元素下方的外邊框和包含塊下方的內邊框之間的距離。「left」和「right」也大抵如此。

這樣看來,定義元素的尺寸又多了一種新方式,除了直接設定其「width」和「height」屬性以外,你還可以同時定義「left」和「right」來設定其寬度,同時定義「top 」和「bottom」來設定其高度,設定可以同時定義這四個屬性,這樣的話,該元素的尺寸就完全定下來了。如

如果有乙個絕對定位元素位於其它相對或絕對定位元素的內部,那麼該巢狀元素將以相對於包含元素的方式被定位。例如下面的範例:網頁內有一張**,使用者可以在這張**上新增矩形,然後往其中寫一些說明文字。

html檔案的內容如下:

css檔案的內容如下:

效果如下:

在乙個相對定位的元素中,新增了一張**,然後又新增了乙個絕對定位的元素。那為何要將外部的——也就是id為「pic」的元素設定成相對定位呢?很簡單,因為要使它所包含的元素以它為基準進行定位,而不至於飄到別處去,以至於覆蓋了別的元素。

上面的這個例子就是乙個簡單的覆蓋——利用絕對定位元素脫離文件的特徵來在**上建立乙個覆蓋層,這個例子可以作一點改進:當使用者點選**的左半邊區域時,讓瀏覽器顯示上一張**;當使用者點選**的右半邊區域時,讓瀏覽器顯示下一張**。

首先刪除之前的覆蓋層,建立兩個鏈結。

html檔案的內容如下:

css檔案的內容如下:

效果如下:

DIV CSS佈局的問題(相對和絕對定位)

阡陌半緣君 div css居然不用position?是隨便看些div css的頁面,檢視一下原始檔不就知道了?元素為relative時,如果它沒有父級,則參照body定位,子元素為absolute時,參照父級定位.所以,用得多的方法是 父元素相對,子元素絕對 寒雲 定義標籤的時候需要不需要 posi...

父元素相對定位,子元素絕對定位,怎樣能使父元素隨子元素的高度

這位你好,絕對定位的元素已經脫離了文件流,父元素是不會隨子元素高度變化的。css裡面定位 如果子元素是絕對定位的話 父元素必須是相對定位嗎 可不可以是絕對定位 絕 絕對定位裡面可以放絕對定位,不管是絕對定位還是相對定位,都是按照需求來定的,不是寫死的。絕對定位是脫離文件流的,可以包含絕對定位。子元素...

position屬性值有哪些,css中定位position有哪幾個屬性值?

有以下幾種 1 absolute 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 left top right 以及 bottom 屬性進行規定。2 fixed 生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 left top right 以及...