div css的絕對定位和相對定位

2021-06-29 10:25:16 字數 5117 閱讀 6644

1樓:匿名使用者

絕對定位(absolute):將被賦予此定位方法的物件從文件流中拖出,使用left,right,top, bottom等屬性相對於其最接近的一個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,即還是遵循html定位規則的,則依據 body 物件左上角作為參考進行定位。絕對定位物件可層疊,層疊順序可通過 z-index 屬性控制,z-index值為無單位的整數,大的在最上面,可以有負值(目前負值ff不支援)。

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

詳細內容看這裡

2樓:匿名使用者

當標籤設定相對定位時,它裡面如果有子元素設定了絕對定位,那就表示子元素是相對於父元素決定它的位置,如子元素裡有top:100px,left:100px;它就表示,子元素是父元素的下邊100畫素,左邊100畫素的位置,其實相對位置沒什麼實際效果,設定它只是為了引出它子元素的絕對位置。

記住這點及可以了

3樓:匿名使用者

基本上是外相對,內絕對~~

css絕對定位和相對定位的區別

4樓:山東文匯軟體

一:絕對定位

position: absolute;絕對定位:絕對定位是相對於元素最近的已定位的祖先元素(即是設定了絕對定位或者相對定位的祖先元素)。

如果元素沒有已定位的祖先元素,那麼它的位置則是相對於最初的包含塊(body)。

絕對定位本身與文件流無關,因此不佔空間,普通文件流中的元素的佈局就當絕對定位的元素不存時一樣,所以 它們可以覆蓋頁面上其他的元素,且可以通過z-index屬性來控制這些層的對方順序。

#box_relative

二:相對定位

position: relative;相對定位:相對定位是相對於元素在文件中的初始位置——首先它出現在它所在的位置上(即不設定position時的位置,然後通過設定垂直或水平位置,讓這個元素“相對於”它的原始起點進行移動;

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

#box_relative

注意:position:absolute,float會隱式地改變display的型別(display:

none除外)。即是當元素設定position:absolute、float:

left、float:right中任意一個時,都會讓元素以display:inline-block的方式顯示(特點是:

可以設定長寬,預設寬度不佔滿父元素)。這時,即使故意設定display:inline; display:

block都是無效的。

但是float在ie6下的雙邊距bug就是用display:inline; 來解決的。

position:relative不會隱式改變display的型別。

5樓:林學禮

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

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

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

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

6樓:匿名使用者

div css中的絕對定位和相對定位的區別,我從網上看了好多,都沒個詳細的說法,其實也不用搞到那麼複雜的。

先說相對定位:跟它的名一樣,相對嘛,要有一個參照物,但這個參照不是別的,是它自己呢,也就是說沒設相對定位的位置,那你會問了,設沒設都在那個位置為什麼要設呢,因為只有設定了才能使 top,left這些生效,也就是設了才能相對自己原來的位置偏移,原來的位置保留著,偏移後會把其它的層遮罩住。

再說絕對定位:在佈局裡不可能有絕對定位的,再怎麼樣都有一個參照位置的,絕對定位的參照位置就不像相對那樣是自己了,至於是哪個,就看它的上級或上上級有沒有定位了,也就是有沒有position:relative;或position:

fixed了,好像position:inherit;也行,前面兩個可以,後面那個不設什麼的不用也行,最好用position:relative;吧,轉入正題,當要絕對定位的層設好要參照位置的層後,就可以用top,left這些來定位置了,如果它的上級或上上級都沒定位的話只就會根據body的位置來定位了,還有最後一點,絕對定位是不佔位置的,它會像ps的圖層一樣單獨做一層,至於第幾層你可以通過z-index:

這個屬性來設定

css樣式表中,如何將一個div標籤相對於另外一個div進行絕對定位

7樓:立青日月

有幾個方法:

一種:div1設定為position:relative,div2設定為position:absolute,此時的div2就相對於div1進行基準定位了。。。

因為絕對定位position:absolute,不在標準流中,所以內聯元素不知到他的位置,會跑到他的下面去。。。這裡就看你需要什麼樣式了,如果簡單的可以用padding和margin配合完成,讓內聯元素出來。。

但螢幕縮小放大就變形了。。

二種,就是你改寫一下你的html

把div2放到div1裡面,裡面設定為float,再position:relative進行浮動後地位,

這種方法比第一種好,這裡看你的需求了///

8樓:司馬唐遷

把div2放在div1裡,div1使用相對定位,div2使用絕對定位。

具體點的**查手冊,主要設定div2的top值和left值,自己試想要的效果。

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

9樓:很多很多

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

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

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

10樓:河東陳彬

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

#first

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

#second

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

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

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

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

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

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

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

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

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

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

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

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

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

3.被關聯的絕對定位

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

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

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

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

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

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

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

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

HTML CSS中關於絕對定位和相對定位定位的優缺點以及該注意的地方,現在最好的定位方式是怎麼定位

哥們,這個問題是不能這麼問的,語言都是根據需求設計出來的。都有用處。你自己用得多了就明白了。一般絕對定位經常是需要有相對定位的輔助的,絕對定位預設是根據來計算位置的,而往往網頁寫的時候經常並不能明確的知道你要把一個塊定位在那裡,這個塊距離的top和left是多少。這個是相對定位,設定了之後和沒有設定...

相對地址和絕對地址的區別,EXCEL中,相對地址,絕對地址和混合地址的格式和區別是什麼?

1 速度不同 相對地址的跳轉命令簡短,執行速度快,但範圍有所限制。彙編源程式的符號地址,在彙編過程中會根據跳轉的距離自動形成,在相對範圍內的就彙編成相對跳轉。絕對地址則相反,命令長,速度慢,但沒有範圍的限制。在彙編過程中會根據跳轉的距離自動形成,超出範圍則彙編成為絕對跳轉。2 適用不同 3 特點不同...

相對評價絕對評價各是什麼意思,「相對評價」和「絕對評價」各是什麼意思

相對評價來是在被評源 價物件的群體中建立基 bai準 通常均以該 du群體的平均水平作為zhi這一基準 dao然後把該群體中的各個物件逐一與基準進行比較,以判斷該群體中每一成員的相對優勢。絕對評價法是在評價物件的集合之外確定一個標準,評價時把評價物件與客觀標準進行比較,確定評價物件達到目標基準絕對位...