CSS中,為什麼絕對定位(absolute)的父級元素必須是相對定位(relative)

2021-04-02 23:05:19 字數 4962 閱讀 5002

1樓:手機使用者

css沒有規定絕對定位的東西必須有個相對定位的爹地吧。你誤解了..

2樓:匿名使用者

html**

我是bcss**:

* .a

.b{ position:absolute; right:0px; bottom:...

這兩個是配合使用的,a定義了relative後,b就會相對於a進行移動。

其實絕對定位absolute的參照物件是「離它最近的已定位的祖先元素」,這句話裡有兩個關鍵,

乙個是「離它最近的祖先元素」,意思是那個參照元素不一定是父元素,也可以是它的爺爺、爺爺的爺爺等等,如果它的祖先裡同時有2個及以上的定位元素,就參照離它最近的乙個元素定位

還有乙個是「已定位」,這個定位也不一定非要是相對定位,也可以是絕對定位,為什麼一般都是用相對定位呢,因為相對定位的特性是雖然它定位了,就算給了偏移量它離開了原來的地方,但是它原來佔的地方也不會讓出來的,這樣的好處是原來在它周圍的其他元素不會因為它的離開而改變位置而使頁面亂套,因為在你這個例子裡我們只是要讓a作為b的乙個參照偏移位置,並不需要a元素以及它周圍的元素有所改變,所以用相對定位是非常合適的(如果你另有其他需要,祖先元素絕對定位也不是不可以)

一般將absolute元素的父元素設為relative

div的相對定位和絕對定位是什麼意思,什麼區別啊?

3樓:學雅思

相對定位和絕對定位是定位的兩種表現形式,區別如下:

一、主體不同

1、相對定位:是設定為相對定位的元素框會偏移某個距離。

2、絕對定位:absolute 脫離文件流,通過 top,bottom,left,right 定位。

二、特點不同

1、相對定位:在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。

2、絕對定位:選取其最近的父級定位元素,當父級 position 為 static 時,absolute元素將以body座標原點進行定位,可以通過z-index進行層次分級。

三、表現方式不同

1、相對定位:對乙個元素進行相對定位,它將出現在它所在的位置上。可以通過設定垂直或水平位置,讓這個元素「相對於」它的起點進行移動。

2、絕對定位:文字流中的內容會頂替絕對定位元素的位置,而絕對定位元素自然的層疊於文字流之上。而在單一的絕對定位中,定位元素將會跑到網頁的左上角,因為那裡是被絕對定位後的座標原點。

4樓:匿名使用者

相對定位

這個教程應該比較清楚了

5樓:匿名使用者

絕對定位(absolute):

當乙個div塊的位置被定義為絕對定位的時候,也就意味著它失去了文件流的位置,後面的文件流會緊跟著補上來接替它的位置。如果上下左右的絕對偏移量都是零,那麼它將漂浮在原來的位置上。否則就會以瀏覽器的上下左右四邊為基準進行偏移。

相對定位(relative):

當設了相對的偏移量之後,這個div原來所佔據的位置(文件流)不會被下面的div塊擠佔,而是空在那裡;當偏移後向下或者向右的內容會被隱藏,而 這一點區別於絕對定位,絕對定位會出現滾動條。但是向左或者向右的內容超出當前瀏覽器的視線,無論是相對還是覺得定位,超出的部分都會被隱藏。

區別如下:

1、相對定位不會失去文件流中的位置,而絕對定位和固定定位都會失去原來在文件流中的位置而被下面的替代;

2、無論是相對、絕對還是固定定位,當偏移量超出上面、左邊瀏覽器窗體(或者說超出可視區域)的時候,超出的內容都會被隱藏;而超出下面和右邊的時候,相對定位和固定定位會隱藏超出的部分內容,而絕對定位會出現滾動條。

3、相對、絕對和固定定位都會浮在正常文件流的上面,如果遮蓋了正常顯示的文件流,可以設定z-index來消除。

6樓:希望在明天

相對定位指的是相對於上一層的div來說的,所有的距離都是相對於本div的外層div。而絕對定位指的是任何時候都是以頁面的邊來定位的

7樓:匿名使用者

------------------------------------------解釋一下:

父層fatherbox設為相對定位,子層sonbox設為絕對定位,相對於父層來說,

它在距左20px距上20px的位置顯示,過於詳細的解釋網上搜得到,樓主實踐一下就懂了.

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

8樓:很多很多

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

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

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

9樓:河東陳彬

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

#first

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

#second

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

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

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

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

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

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

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

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

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

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

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

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

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

3.被關聯的絕對定位

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

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

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

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

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

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

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

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

10樓:小迷虎兒

絕對定位是相對于父標籤決定位置,一般用於相對定位標籤裡面,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為基準標籤。

11樓:

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

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

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

第二,產生的影響

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

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

12樓:安徽大科公考

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

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

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

css 父級div絕對定位影響子級div的問題

你還需要好好理解容器的絕對定位和相對定位 1 預設最外層的容器一般都不採用絕對定位,也就是最外層的容器不設定position,一般都是要麼居中要麼居左。2 當要設定某個容器絕對定位,一般都是相對父容器。否則不同解析度的客服端就會出現定位錯位的問題。3 如何設定相對父容器的絕對定位?比如 div定位問...

css中是什麼意思,CSS中是什麼意思

在程式設計裡面 一般代表的都是萬用字元 css中 代表的是所有html的doc元素標籤 如 那麼 代表的就是body div p span標籤元素 這個是通配選擇器,為的是給頁面上所有元素新增樣式,一般不會用 在css中 什麼意思 萬用字元樣式,一般用於公共樣式的書寫,會全域性定義。層疊樣式表 英文...

為什麼再css3中新增了 moz 火狐的私有屬性,但是火狐瀏覽器不顯示把 moz 去掉火狐就正常顯示了?還有想要

跟css編碼沒關係,跟火狐的版本有關係。比如早一些版本的ff瀏覽器,需要加私有字首。而新出某個版本的ff時,有可能火狐的人覺得某些屬性已經是css3裡面上釘子上板的,即w3c不會再怎麼修改這個css屬性,以後一直這麼用下去了 雖然還沒成為w3c的標準,但已經成為事實上的標準 此時火狐的人就有可能在新...