cssabsolute(cssabsolute的用法)

哈嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

1 為什么學習定位position

如果，說浮動關鍵在一個浮”字上面，那么我們的定位，關鍵在于一個“位”上。

PS：定位是我們CSS算是數一數二難點的了，但是，你務必要學好它，我們CSS離不開定位，特別是后面的特效，天天和定位打交道。不要抵觸它，反而要愛上它，它可以讓我們工作更加輕松哦！

2 定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

邊偏移:

也就說，以后定位要和邊偏移搭配使用了，比如top：100 px； left：30px;等等

定位模式：

在CSS中， position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{ position：屬性值；}

position屬性的常用值：

3 靜態定位（static）

靜態定位是所有元素的默認定位方式，當 position屬性的取值為 static時，可以將元素定位于靜態位置。所謂靜態位置就是各個元素在HTMl文檔流中默認的位置。

上面的話翻譯成白話：就是網頁中所有元素都默認的是靜態定位哦！其實就是標準流的特性。

在靜態定位狀態下，無法通過邊偏移屬性（top、 bottom、left或right）來改變元素的位置。

PS：靜態定位其實沒啥可說的。

4 相對定位relative（自戀型）

小笑話：

剛剛看到一個超級超級帥的帥哥，看得我都忍不住想和他搞基了。世間怎會有如此之完美的男人。我和他就這樣一動不動的對視著，就仿佛一見鐘情。時間也在這一瞬間停止了。直到我的手麻了。才戀戀不舍的放下鏡子。。。。

相對定位是將元素相對于它在標準流中的位置進行定位，當 position屬性的取值為 relative時，可以將元素定位于相對位置。

對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。如下圖所示，即是一個相對定位的效果展示：

注意:

1 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。

2 其次，每次移動的位置，是以自己的左上角為基點移動（相對于自己就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是讓多個塊級元素一行顯示，那么定位的主要價值就是移動位置，讓盒子到我們想要的位置上去。

5 絕對定位脫標absolute（拼爹型）

小笑話

吃早飯時，老婆往兒子碗里放了兩個煎蛋，兒子全給了我，還一本正經地說：“爸爸，多吃點，男人養家不容易。”

我一陣感動，剛想夸他兩句。

兒子接著說：“以后全靠你讓我拼爹了！”

注意：

如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位。

當 position屬性的取值為 absolute時，可以將元素的定位模式設置為絕對定位。

注意：絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置。

6 父級沒有定位

若所有父元素都沒有定位，以瀏覽器為準對齊 （documen文檔）。

7 父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

8 何為子絕父相

子絕父相

這個子絕父相太重要了，是我們學習定位的口訣，時時刻刻記住的。

這句話的意思是子級是絕對定位的話，父級要用相對定位。

首先，我們說下，絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。

就是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說，子絕父絕，子絕父相都是正確的。

9 定位練習-哈根達斯

10 絕對定位水平垂直居中

普通的盒子是左右 margin改為auto就可，但是對于絕對定位就無效了

定位的盒子也可以水平或者垂直居中，有一個算法。

1 首先left：50%

2 然后走自己外邊距 負的一半值就可以了。

11 淘寶焦點圖分析

12 淘寶輪播圖-上

13 淘寶輪播圖-中

14 淘寶輪播圖-下

15 淘寶輪播圖權重問題

這里要用li.current 如果用.current就不會改變顏色

16 固定定位fixed（認死理型）

固定定位是絕對定位的一種特殊形式，類似于正方形是一個特殊的矩形。它以瀏覽器窗口作為參照物來定義網頁元素。當 position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。

當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

1.固定定位的元素跟父親沒有任何關系，只認瀏覽器。

2.固定定位完全脫標，不占有位置，不隨著滾動條滾動。

記憶法：就類似于孫猴子，無父無母，好不容易找到一個可靠的師傅（瀏覽器），就聽的師傅的，別的都不聽。

17 疊加次序（z-index）

當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。

在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z- index層疊等級屬性，其取值可為正整欻、負整數和0。

比如：z- index：2；

注意：

1 z- index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。

2 如果取值相同，則根據書寫順序，后來居止。

3 后面數字一定不能加單位。

4 只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。

18 定位總結

?

19 固定絕對定位模式轉換

跟浮動一樣，元素添加了絕對定位和固定定位之后，元素模式也會發生轉換，都轉換為行內塊模式，

因此比如行內元素如果添加了絕對定位或者固定定位后，可以不用轉換模式，直接給高度和寬度就可以了。

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《16 學成網案例-下》小伙伴們不要錯過喲！