css裡面相對定位和絕對定位哪個會影響佈局

2021-05-05 01:42:50 字數 5303 閱讀 4594

1樓:冉姑娘

都有可能影響你的佈局;

相對定位:是相對於某一個元素進行定位,這個元素可能是一個div也可能是一個span標籤,根據你的需要來定;然後,可以通過設定垂直或水平位置,讓這個元素「相對於」它的起點進行移動。

絕對定位:絕對定位是以整個頁面最左上角的位置為座標進行定位,而你所設定的數值也是根據左上角的位置來確定,

這兩個都會對我們的佈局產生一定的影響,我們要做的就是根據我們的需要,讓他們儘可能的調整位置,不影響我們的佈局

2樓:匿名使用者

相對定位會根據原來的位置進行移動,之前的位置被空了出來,會影響頁面佈局。

絕對定位脫離了文字流,不會影響佈局。

3樓:匿名使用者

都會影響佈局。假設現在有一個二維的座標系(x,y)座標系,在(1,1)這個地方我們有一個點a,現在用絕對定位去定位點b(2,2),這樣的話b點的座標相對於座標系來說就是在(2,2)這個點上。如果是用相對定位(2,2)去定義b點,那麼b點對於整個座標系來說的座標就是(3,3)。

不知道你能不能聽明白。

4樓:

二樓正解, 相對定位 是相對於於當前父級div來定位 ,絕對定位是相對於整個頁面body來定位

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

5樓:蝦米站長

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

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

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

6樓:天涯々葬

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

個視情況而定了..

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

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

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

7樓:匿名使用者

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

相對定位,則是以專

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

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

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

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中絕對定位和相對定位是什麼意思?

13樓:林學禮

絕對定位(absolute)意思是:將被賦予此定位方法的物件從文件流中拖出,使用left,right,top, bottom等屬性相對於其最接近的一個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,即還是遵循html定位規則的。

相對定位(relative)意思:物件不可層疊,依據left,right,top,bottom等屬性在正常文件流中偏移自身位置。同樣可以用z-index分層設計。

層疊樣式表(英文全稱:cascading style sheets)是一種用來表現html(標準通用標記語言的一個應用)或xml(標準通用標記語言的一個子集)等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。

css 能夠對網頁中元素位置的排版進行畫素級精確控制,支援幾乎所有的字型字號樣式,擁有對網頁物件和模型樣式編輯的能力。

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

14樓:學雅思

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

一、主體不同

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

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

二、特點不同

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

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

三、表現方式不同

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

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

CSS中的絕對定位是什麼意思能簡單點的解釋說一下嗎

絕對定位就是把來元素自 的左上角固定到瀏覽器視窗的某個指定的 唯一的座標點上,比如說 left 100px top 50px 就是說元素的左邊距離瀏覽器視窗的左邊100畫素 元素的上邊距離瀏覽器視窗的上邊50畫素。而相對定位就是相對於元素本來的位置再進行平移後獲得新的位置,也就是說這個新位置是要根據...

相對和絕對高度意義一不一樣,相對和絕對高度意義一不一樣

不一樣 相對高度是指兩個地點的絕對高度之差。表示地面某個地點高出另一個地點的垂直距離,叫相對高度。相對高度的起點是不固定的。例如山峰高出鄰近河谷的高度。相對高度是地勢起伏大小的指標。相對高度是相鄰兩個地點的海拔差 相對高度是指選某一指定參考平面為基準面,物體重心在空中距離指定參考平面的垂直距離 絕對...

excel裡相對引用和絕對引用的含義

首先介紹一下相對引用和絕對引用是什麼。相對引用 比如在 b2 單元格中輸入了 a2 然後把這個公式向下拖動到 b3 單元格中,b3 單元格中的內容變成了 a3 也就是說,b2 這個單元格中儲存的並不是 a2 的內容,而是這兩個單元格之間的一個相對關係。絕對引用 比如在 b2 單元格中輸入了 a 2 ...