您現在的位置是:電腦技術吧?>? 組裝維修 ??>??相對定位是相對什么定位,相對定位和絕對定位的特點??>??正文詳情

相對定位是相對什么定位,相對定位和絕對定位的特點

禽安琪2019-11-17 22:40:34 人圍觀
簡介相對定位和絕對定位的視頻一般來說,我們元素的position屬性的值默認是靜態的,即沒有位置,元素出現在正常的文檔流中。此時,為該元素設置的“左”、“右”、“底”和“頂”偏移

CSS的相對定位和絕對定位通常情況下,我們元素的position屬性的值默認為static 就是沒有定位,元素出現在正常的文檔流中,,這個時候你給這個元素設置的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設置一個距離左邊距偏移100px的聲明:left:100px 那么這條聲明不會起到任何效果。

還有z-index屬性在這時也不會生效。

也就是說我們平時如果不給某元素一個position屬性的聲明,那么它默認的就是我上述的這種情況,不過因為有了浮動,所以通常情況下我們還真不需要給元素設置position屬性!但是某些特殊的情況下,我們不得不用到position屬性,那我們今天就講講position屬性的relative和absolute值首先說relative,相對定位。

怎么理解呢?

如果說我對某元素設置了相對定位,那么首先這個元素他會跟其它的元素一樣,出現在文檔流中它該出現的位置,然后,我們可以設置它的水平或垂直偏移量,讓這個元素相對于它在文檔流中的位置的起始點進行移動。

有一點要注意, 在使用相對定位時,就算元素被偏移了,但是他仍然占據著它沒偏移前的空間。

這里值得注意的一點是:偏移可不是邊距,跟邊距是不一樣的。

我們先看看下圖:

上圖中有三個浮動的塊,第二個塊是設置了相對定位position:relative了的,這時大家看到它的位置并沒有其它什么不同,跟其它兩個塊一樣都處在正常的文檔流中。

接下來我給那個設置了position:relative的塊設置一個偏移:left:50px ; top:30px 這時我們再看看效果:

這時我們發現第二個塊針對它本身位置的起始點進行了一個偏移,但是它原來所占據的那個位置空間依然還在(虛線框標示的地方),即使我們把偏移量設置得再大一點,使它完全離開原來的位置,它原來位于文檔流中的位置仍然會存在,不會被第三個塊浮動過來填補掉。

同時,它的偏移也不會把別的塊從文檔流中原來的位置擠開,如果有重疊的地方它會重疊在其它文檔流元素之上,而不是把它們擠開,就像圖中那樣,它已經覆蓋在了第三個塊之上。

我們可以設置它的z-index屬性來調整它的堆疊順序。

接下來我們來看看絕對定位:position:absolute被設置了絕對定位的元素,在文檔流中是不占據空間的,如果某元素設置了絕對定位,那么它在文檔流中的位置會被刪除,那這個元素到哪去了呢?

它浮了起來,其實設置了相對定位relative時也會讓該 元素浮起來,但它們的不同點在于,相對對定位不會刪除它本身在文檔流中占據的那塊空間,而絕對定位則會刪除掉該元素在文檔流中的位置,完全從文檔流中抽了出來,我們可以通過z-index來設置它們的堆疊順序 。

那么絕對定位是如何定位的呢?

首先,如果它的父元素設置了除static之外的定位,比如position:relative,或者position:absolute以及position:fixed,那么它就會相對于它的父元素來定位,位置通過left , top ,right ,bottom屬性來規定,如果它的父元素沒有設置定位,那么就得看它父元素的父元素是否有設置定位 ,如果還是沒有就繼續向更高層的祖先元素類推,總之它的定位就是相對于設置了除static定位之外的定位(比如position:relative)的第一個祖先元素,如果所有的祖先元素都沒有以上三種定位中的其中一種定位,那么它就會相對于文檔body來定位(并非窗口,相對于窗口定位的是fixed)絕對定位的元素相對于誰來定位,我們就把這個誰叫著參照物,我們結合上面的講解來看看下圖就明白了 :

我們看一下在瀏覽器里的效果,我們先看看沒有使用絕對定位時的樣子:

然后我們給第二個塊設置絕對定位:position:absolute 然后再設置一個偏移:left:150px;top:40px; 這時就變成了下圖所示:

還有一點就是:在設置偏移量的時候,我們可以設置負值。

好了,既然理解了相對定位和絕對定位,那我們應該怎么把它們運用到實際案例中呢?

首先我們來看看下圖:

在上圖中的去購物車結算按鈕左上方有一個紅色的小塊,用來顯示購物車中有幾件商品,大家在沒學會絕對定位之前可能不知道這個紅色的小塊要怎么實現,但是現在剛剛學了絕對定位,這個問題就不再是問題了。

我還是親自來做一下吧,我們先把這個背景圖片弄出來:

然后我們寫HTML:divclass=cart_btnspani155/i/spanahref=dd.htmltarget=_blank去購物車結算/ab/b/div上面HTML代碼中的 span元素就是那個用來顯示購物車中商品數量的小紅塊,a元素中是文字描述,b元素是最右邊的小三角。

我們來看一下CSS代碼:.cart_btn{width:120px;height:30px;background:url(../images/picA.png)no-repeat-17px7px#f7f7f7;border:1pxsolid#eee;padding-left:30px;position:relative;_padding-top:5px;_height:25px;}.cart_btnspan{background:url(../images/picA.png)no-repeat-36px-54px;padding-left:7px;position:absolute;top:-12px;left:20px;}.cart_btnspani{float:left;height:20px;background:url(../images/picA.png)no-repeatright-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px;}.cart_btna{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}.cart_btnb{display:inline-block;border-color:transparenttransparenttransparent#CCCCCC;border-style:dasheddasheddashedsolid;border-width:5px;height:0;overflow:hidden;width:0;}上面CSS代碼中我們把購物車圖標作為.cart_btn的背景,這里我們發現一個問題,就是那一張圖片上有三個圖標,大家也發現了,我三個用到圖標的元素都是用這一張圖片做背景,但是顯示的卻不一樣,這里就用到了我們前面講過的背景定位問題,不會的朋友可認去看看前面的第十一講:css背景屬性background詳細講解-使用背景圖片CSS中的內容是什么意思這里就不講了,要講的話就跑題了,這些都是基本的東西,除了那個CSS三角形之外,其它的如果都還不會,那你肯定沒有好好看前面的文章。

再說你實在不懂的話也可以去查一查參考手冊最后我們來看看瀏覽器里的效果:

這個代碼我已經上傳到網站,有需要的朋友可以下下來學習

版權聲明:本文由 禽安琪 整理編輯。

原標題:絕對定位和相對定位的定義,相對定位絕對定位

轉載注明出處:http://www.dn9ww09s.icu/assemble/13307.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • yy網頁版個人中心登錄,手機yy怎么創建房間

    yy網頁版個人中心登錄,手機yy怎么創建房間 相關圖片手機yy怎么創建自頻道YY是一個實時軟件。如果你想活下去,你需要先創建一個頻道。那么你是如何創建一個頻道的呢?YY如何直播?現在,超人軟件編輯將為您一一解答。請不要錯過y...

  • mac地址怎么查,如何查電腦mac地址

    mac地址怎么查,如何查電腦mac地址 相關圖片怎么查ip和mac地址當我們的計算機無法正常訪問互聯網時,通過搜索網絡,我們需要檢查和修改MAC地址。我相信有很多人不知道MAC地址是什么,MAC地址是我們經常提到的物理地址。全名是...

  • 多列布局,多列等高布局

    多列布局,多列等高布局 相關圖片css3flex多列布局摘要:多欄布局是網站應用中常見的一種布局方式。今天,我們將分享4個多欄布局。display:table代碼如下:style。表格{寬度:自動;最小寬度:1000css3多列布局w3c...

  • 迅雷離線巴拉我是什么意思,手機迅雷如何開啟離線下載

    迅雷離線巴拉我是什么意思,手機迅雷如何開啟離線下載 相關圖片迅雷10找不到離線下載相信使用過迅雷的小朋友們都聽說過離線下載功能。那么迅雷離線下載是什么意思呢?如何使用迅雷離線下載?現在,超人軟件編輯想向您介紹迅雷離線下載的相關...

  • divcss布局模板,divcss布局經典實例

    divcss布局模板,divcss布局經典實例 相關圖片css5DIV CSS標簽的完整列表如下。CSS標簽手冊有一個詳細的介紹和教程。請登錄相關頁面瀏覽。div的具體標簽如下:div CSS是網站標準(或web標準)中常用css...

  • 電腦系統字體大小設置,電腦字體大小在哪里調

    電腦系統字體大小設置,電腦字體大小在哪里調 相關圖片電腦繡字最近,許多用戶報告他們的計算機遇到了字體。它們是:(1)關于計算機中的字體,如何選擇計算機中的字體?電腦里的字體呢?讓我們跟著超人軟件來找出解決辦法。希望你...

  • 安卓版手機格式工廠,.dat數據文件怎么打開

    安卓版手機格式工廠,.dat數據文件怎么打開 相關圖片200000000dat文件能刪除嗎許多人不知道計算機上的dat文件是什么或它的用途。Dat文件是一種數據文件,主要有兩種格式:一種是純文本文件,可以通過文本編輯工具打開;另一種是多媒體...

  • 站點如何刪除,刪除站點

    站點如何刪除,刪除站點 相關圖片可信站點刪除不了如何刪除Dreamweaver CS5中的站點,如何刪除Dreamweaver CS5中的站點?我之前就談到過如何建設一個網站,有時候很難避免犯錯。今天,編輯繼怎么刪除受限制的站點...

  • 電腦輸入法消失了怎么辦,電腦自帶輸入法不見了怎么辦

    電腦輸入法消失了怎么辦,電腦自帶輸入法不見了怎么辦 相關圖片切換輸入法的圖標不見一般來說,電腦輸入法會停留在屏幕右下角,但由于某些原因,電腦輸入法會突然消失。如果計算機輸入法的圖標丟失了怎么辦?如何設置計算機輸入法?接下來...

  • 比深度搜索好用的app,深度搜索app官方

    比深度搜索好用的app,深度搜索app官方 相關圖片和深度搜索一樣的app我們以前研究過數據圖的最佳表達式。隨著移動應用的不斷發展,我們將數據圖的性能擴展到了手機上。與在web上顯示數據的空間優勢相比,需要考慮手持設備的方...

熱評文章

  • 加速器連接服務器失敗,流星加速器服務器連接失敗

    加速器連接服務器失敗,流星加速器服務器連接失敗 相關圖片泡泡加速器一直連接失敗當我們玩網絡游戲時,不可避免地會遇到網絡延遲的情況,尤其是當我們穿越網絡時,延遲的情況更為頻繁。此時,我們可以使用在線游戲加速器來解決這個問...

  • x瀏覽器,可以用瀏覽器看的網站

    x瀏覽器,可以用瀏覽器看的網站 相關圖片光子瀏覽器嚴格地說,不僅是CSS可以使IE瀏覽器崩潰,而且是某種XHTML架構。到目前為止,我發現有兩種編寫代碼的方法會分別導致IE6和IE7崩潰。至于原因,我試圖找到答瀏覽器沒有光信...

  • 谷歌瀏覽器使用教程,谷歌瀏覽器默認主頁設置

    谷歌瀏覽器使用教程,谷歌瀏覽器默認主頁設置 相關圖片谷歌怎么恢復舊版本作為一款官方瀏覽器軟件,谷歌瀏覽器得到了很多人的支持。最近,很多谷歌瀏覽器的用戶和朋友都報告說,他們不知道如何設置谷歌瀏覽器的主頁?如何設置Goog...

  • 分號的,分號怎么用

    分號的,分號怎么用 相關圖片分號怎么打出來由于昨天一個頁面的CSS樣式增加了,我們需要在原來的CSS中增加樣式,因為一些修改信息已經添加到了頁眉中,樣式表的頂部已經被修改了。樣式表的頂部是:@chars如何...

  • xinput13dll丟失,找不到xinput_3dll

    xinput13dll丟失,找不到xinput_3dll 相關圖片xinput13dll放在哪里當計算機失去新PoT13DLL時,新PUT1 3.DLL被報告為錯誤,這種情況通常發生在運行游戲程序的過程中,主要是因為一些游戲需要調用該文件,而在Windowxinput13dll怎么安裝...

  • 瀏覽器定義,使用瀏覽器

    瀏覽器定義,使用瀏覽器 相關圖片x瀏覽器雖然在CSS中實現PNG圖像透明的方法很多,但是在各個瀏覽器中的兼容性效果并不好。小編找到了一種在兼容每個瀏覽器的CSS中定義PNG透明效果的方法,如下所示:s瀏覽器類型...

  • 如何給壓縮包加密,壓縮文檔怎么加密

    如何給壓縮包加密,壓縮文檔怎么加密 相關圖片如何將壓縮文件加密無論是在工作還是生活中,我們的電腦經常有別人看不到的隱私信息。那么如何加密壓縮文件呢?當我們忘記密碼時,如何破解加密的壓縮文件?現在,超人軟件將...

  • ppt打不開如何改格式,ppt是什么病的簡稱

    ppt打不開如何改格式,ppt是什么病的簡稱 相關圖片ppt文件損壞修復絕招想必很多人都遇到過PPT不能突然打開的情況,這是非常緊迫的。那為什么PPT不能打開呢?如何修復無法打開的PPT?讓我們跟隨超人軟件編輯器了解關于無法打開PPT的...

  • 精致手工教程,精致手工作品教程

    精致手工教程,精致手工作品教程 相關圖片精致妝容的步驟一。首先,用鋼筆勾出大色塊,挑出下一步2的主要描述點。在這里,車頭是車身的主要描述點,而逐步的調整也必須細致,盡可能地展現出車輛的質感3。以下是對Webjx...

  • 字體在哪個文件夾,文件字體

    字體在哪個文件夾,文件字體 相關圖片ps字體安裝在哪個文件夾看到更多關于電腦默認字體的信息,很多小朋友都有了改變電腦字體的想法,特別是對于那些使用Android手機的用戶。許多人找到了他們最喜歡的字體,但他們不...

關注微信

变脸官网查询