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

時間 2021-06-29 10:25:40

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在盒子中自適應居中:

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

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

DIV CSS中的絕對定位和相對定位的區別菜鳥就不用近來了

div css佈局很少用定位,除非做些特效或有必要才定位。div的佈局就像 那樣巢狀,如果要問絕對定位好還是用相對定位好?因為絕對定位 和文件流沒關係 如無申明,則其是對與body而言的,處理不好的話。如顯示器尺寸變了,可能就會變型。相對定位的元素屬文件流,所以穩定的,相對定位是相對他該出現的位置,...

相對主義是什麼意思,相對主義和絕對主義的真正意思是什麼

葷學岺原琴 相對主義 relativism 是一種認為觀點沒有絕對的對與錯,只有因立場不同 條件差異而相互對立的哲學學說。該學說主要應用在涉及道德準則的場合,因為在相對的思維模式下,價值觀和倫理學只能發揮有限的作用。相對主義有多種不同的形式,取決於爭議的程度。相對主義的實質是 一個概念有確定的形象概...