1樓:網海1書生
絕對定位就是把來元素自
的左上角固定到瀏覽器視窗的某個指定的、唯一的座標點上,比如說 left:100px; top:50px 就是說元素的左邊距離瀏覽器視窗的左邊100畫素、元素的上邊距離瀏覽器視窗的上邊50畫素。
而相對定位就是相對於元素本來的位置再進行平移後獲得新的位置,也就是說這個新位置是要根據原來的位置來定的,比如 left:10px; top:-20px 就是把元素往右移動10畫素,往上移動20畫素。
打個比方,在地球上我們用經緯度來確定一個點的位置就是絕對定位,而類似「東南方向15公里」這樣的就是相對定位了。
css中,絕對定位和相對定位是什麼意思?通常都是怎麼用?
2樓:很多很多
1、新建一個html檔案輸入兩個div標籤,接著使用style屬性,分別給div設定為絕對定位absolute和相對定位relative,讓他們其中全部向左移動20px,向上移動30px的距離:
2、然後儲存檔案開啟瀏覽器看看效果,位置顯示還是比較明顯的:
3、最後解釋下這個結果,絕對位置就是對瀏覽器頁面左邊和頂部的距離,相對位置就是距離正常的標題的距離。以上就是css中絕對定位和相對定位的使用方法:
3樓:河東陳彬
我們看圖中是一個相對定位的元素
#first
而下方是一塊預設定位的黑色區塊
#second
我們看到這個處在文字流的區塊被上面的相對定位擋住了一部分,這說明:「當元素被設定相對定位或是絕對定位後,將自動產生層疊,他們的層疊級別自然的高於
文字流」。除非設定其z-index值為負值。並且我們發現當相對定位元素進行位移後,表現內容已經脫離了文字流,只是在本文流中還為原來的相對對定位留
下了原有的總寬與總高(內容的高度或是寬度加上
margin\border\padding的數值)。這說明在相對定位中,雖然表現區脫離了原來的文字流,但是在文字流中還還有此相對定位的老窩。這點
要特別注意,因為在實際應用中如果相對定位的位移數值過大,那麼原有的區域就會形成一塊空白。
並且我們注意,定位元素的座標點是在margin值的左上邊緣點,即圖中的b點。那麼所有的位移的計算將以這個點為基礎進行元素的推動。
2.可以在任意一個位置的元素(絕對定位)
如上所述:相對定位只可以在文字流中進行位置的上下左右的移動,同樣存在一定的侷限性,雖然他的表現區脫離了文字流,但是在文字流卻依然為其保留了一席之
地,這就好比一個打工的人他到了外地,但是在老家依然有一個專屬於他的位置,這個位置不隨他的移動而改變。但是這樣很明顯就會空出一塊空白來,如果希望文
本流拋棄這個部分就需要用到絕對定位。絕對定位不光脫離了文字流,而且在文字流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠裡的職位,如
果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過trbl來設定元素,使之處在任何一個位
置。在父層position屬性為預設值時,trbl的座標原點以body的座標原點為起始。看下圖:
上圖可知,文字流中的內容會頂替絕對定位無素的位置,一點都不會客氣。而絕對定位元素自然的層疊於文字流之上。而在單一的絕對定位中,定位元素將會跑到網頁的左上角,因為那裡是他們的被絕對定位後的座標原點。
3.被關聯的絕對定位
上面說的是單一的絕對定位,而在實際的應用中我們常常會需要用到一種特別的形式。即希望定位元素要有絕對定位的特性,但是又希望絕對定位的座標原點可以固定在網頁中的某一個點,當這個點被移動時絕對位定元素能保證相對於這個原座標的相對位置。也就是說需要這個絕對定位要跟著網頁移動,而並且是因定在網頁的某一個固定位置。
通常當網頁是居中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是為這個絕對定位的父級設定為相對定位或是絕對定位。那麼絕對定位的座標就會以父級為座標起始點。
雖然是如此,但是這個座標原點卻並不是父級的座標原點,這是一個很奇怪的座標位置。我們看一下模型圖示:
我們看到,這個圖中父級為黑灰色區塊,子級為青色區塊。父級是相對定位,子級是絕對定位。子級設定了頂部位移50個畫素,左傾位移50個畫素。
那麼我們看,子級的座標原點並不是從父級的座標原點位移50個畫素,而是從父級塊的padding左上邊緣點為座標起始點(即a
點)。而父級這裡如果要產生位置移動,或是瀏覽器視窗大小有所變動都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。
這是一種很特別並且也是非常實用的應用方式。如果你之前對於定位的控制並不自如的話,相信看完對這裡對定位的解釋一定可以把定位使用得隨心所欲。
實際案例,div在盒子中自適應居中:
4樓:小迷虎兒
絕對定位是相對於父標籤決定位置,一般用於相對定位標籤裡面,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為基準標籤。
5樓:
這個簡單理解的話,有2點內容
第一,不管是什麼,既然要定位,就需要有一個參照物相對定位的參照物是本身。
絕對定位的參照物就是父級元素,當父級元素中不存在相對定位,那麼它的參照物就是body
第二,產生的影響
相對定位,設定後,原來的位置始終保留著
絕對定位,設定後,原來的位置會被後面的內容佔據一般使用的話,看你需要實現什麼樣的效果,但基本基於上面2點內容來考慮。你稍微用幾次後就會有所體會的
6樓:安徽大科公考
絕對定位和相對定位,都必須找到參照物。
一般參照物,是父元素,根元素,瀏覽器。
沒有參照物,一切都無法定位。記住這一點,對理解定位,很有幫助。
div的相對定位和絕對定位是什麼意思,什麼區別啊?
7樓:學雅思
相對定位和絕對定位是定位的兩種表現形式,區別如下:
一、主體不同
1、相對定位:是設定為相對定位的元素框會偏移某個距離。
2、絕對定位:absolute 脫離文件流,通過 top,bottom,left,right 定位。
二、特點不同
1、相對定位:在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。
2、絕對定位:選取其最近的父級定位元素,當父級 position 為 static 時,absolute元素將以body座標原點進行定位,可以通過z-index進行層次分級。
三、表現方式不同
1、相對定位:對一個元素進行相對定位,它將出現在它所在的位置上。可以通過設定垂直或水平位置,讓這個元素「相對於」它的起點進行移動。
2、絕對定位:文字流中的內容會頂替絕對定位元素的位置,而絕對定位元素自然的層疊於文字流之上。而在單一的絕對定位中,定位元素將會跑到網頁的左上角,因為那裡是被絕對定位後的座標原點。
8樓:匿名使用者
相對定位
這個教程應該比較清楚了
9樓:匿名使用者
絕對定位(absolute):
當一個div塊的位置被定義為絕對定位的時候,也就意味著它失去了文件流的位置,後面的文件流會緊跟著補上來接替它的位置。如果上下左右的絕對偏移量都是零,那麼它將漂浮在原來的位置上。否則就會以瀏覽器的上下左右四邊為基準進行偏移。
相對定位(relative):
當設了相對的偏移量之後,這個div原來所佔據的位置(文件流)不會被下面的div塊擠佔,而是空在那裡;當偏移後向下或者向右的內容會被隱藏,而 這一點區別於絕對定位,絕對定位會出現滾動條。但是向左或者向右的內容超出當前瀏覽器的視線,無論是相對還是覺得定位,超出的部分都會被隱藏。
區別如下:
1、相對定位不會失去文件流中的位置,而絕對定位和固定定位都會失去原來在文件流中的位置而被下面的替代;
2、無論是相對、絕對還是固定定位,當偏移量超出上面、左邊瀏覽器窗體(或者說超出可視區域)的時候,超出的內容都會被隱藏;而超出下面和右邊的時候,相對定位和固定定位會隱藏超出的部分內容,而絕對定位會出現滾動條。
3、相對、絕對和固定定位都會浮在正常文件流的上面,如果遮蓋了正常顯示的文件流,可以設定z-index來消除。
10樓:希望在明天
相對定位指的是相對於上一層的div來說的,所有的距離都是相對於本div的外層div。而絕對定位指的是任何時候都是以頁面的邊來定位的
11樓:匿名使用者
------------------------------------------解釋一下:
父層fatherbox設為相對定位,子層sonbox設為絕對定位,相對於父層來說,
它在距左20px距上20px的位置顯示,過於詳細的解釋網上搜得到,樓主實踐一下就懂了.
css中的絕對定位到底是怎樣定位的
12樓:網海1書生
你把baidiv2放到div3的裡面(或者du說讓div3包含div2)就能實現你的目zhi的了。
這裡dao所說「離自己最近」,並版不是權指兄弟元素之間距離的遠近,而是指上下迭代關係的遠近,也就是說,先看自己的父元素是否絕對定位或相對定位元素,是就根據他的位置來決定自己的位置,如果不是就再找祖父元素,一直上溯直到找到符合條件的祖先元素。
css中的class是什麼意思，div css中class和id什麼意思啊？
1 class屬性 命名後，可以在css中設定標籤的樣式，而且class屬性具有重複性和多樣性。下面做一個演示，首先新建一個html檔案，這裡輸入三個h1標籤 2 接著給第一個h1標籤設定class屬性，在style中設定樣式，這裡的class就叫 h1 3 開啟瀏覽器檢視效果，相比沒有設定clas...
css中 bodywrap 什麼意思
css中的 是代表選擇器的層級關係為直接子級。如下示例 如上邊這個html 結構。body wrap 這樣寫控制的就是body裡邊的所有class為wrap的元素，包括所有子孫級。body wrap 這樣寫就只會控制直接子級，content裡邊的wrap就不會受控制。body裡面所有class命名為...
css的教程xxlarge是什麼意思
中段落align center 居中顯示 另外還有 align left rightstyle 是樣式 css 定義 這裡的 font size xx large 表示字型的大小。見下語法 語法 font size 絕對大小 相對大小 長度 百分比 允許值 1 絕對大小 有 xx all x all...