h5定位的四種方式

為什麼要用定位？

那麼定位，最常運用的場景再那裡呢？

如果用标準流或者浮動，實作會比較複雜或者難以實作，此時我們用定位來做，just soso！

元素的定位屬性

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

1、邊偏移

邊偏移屬性	描述
top	頂端偏移量，定義元素相對于其父元素上邊線的距離
bottom	底部偏移量，定義元素相對于其父元素下邊線的距離
left	左側偏移量，定義元素相對于其父元素左邊線的距離
right	右側偏移量，定義元素相對于其父元素右邊線的距離

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

2、定位模式(定位的分類)

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

選擇器{position:屬性值;}

position屬性的常用值

值	描述
static	自動定位（預設定位方式）
relative	相對定位，相對于其原文檔流的位置進行定位
absolute	絕對定位，相對于其上一個已經定位的父元素進行定位
fixed	固定定位，相對于浏覽器視窗進行定位

1.靜态定位(static)

靜态定位是所有元素的預設定位方式，當position屬性的取值為static時，可以将元素定位于靜态位置。 所謂靜态位置就是各個元素在HTML文檔流中預設的位置。

白話：網頁中所有元素都是靜态定位，也就是标準流的特性

在靜态定位下，沒有偏移量

PS ：沒啥好講的

2.相對定位relative 自戀型

相對定位不脫标（不脫離标準流）

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

注意： 1.元素相對定位後，雖然可以用便偏移量改變位置，但是在文檔流中的位置仍保留。

​ 2.每次移動的位置，都是以自己的左上角為基點移動

浮動：多個塊級元素一行顯示

相對定位：主要價值就是移動位置

3.絕對定位absolute 拼爹型

絕對定位完全脫标

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

父級沒有定位

若所有父元素都沒有定位，以浏覽器為準對齊(document文檔)。

父級有定位

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

子絕父相

非常重要，是我們的口訣

首先，絕對定位是将元素依據最近的已經定位絕對，固定，相對的父元素(祖先)進行定位。

也就是說,子級絕對定位，父級隻要是定位(除static靜态定位)就可以，也就是說，子絕父絕也行

那麼，為何父級要求時相對定位呢？

子級絕對定位，父級就用相對定位(最優解),因為子級時絕對定位不占位置，就可放在父級的任何位置

因為父盒子在布局時，需要占有位置，是以父級要相對定位

什麼是文檔流，普通流，标準流

都是一個意思。

最普通的布局叫标準流

絕對定位的盒子水準/垂直居中

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

水準居中的算法:

​ 1.left 50% ，父盒子的一半大小

​ 2.再有外邊距負的一半值即可

4.固定定位fixed

它以浏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可将元素的定位模式設定為固定定位。

固定定位是一種特殊的絕對定位

疊放次序（z-index）

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

1.預設值是0，取值越大，定位元素越居上

2.取值相同，看書寫順序

3.數字沒有機關

4.隻有定位才有該屬性，浮動，标準流，靜态定位都沒有該屬性

四種定位總結

定位模式	是否脫标（脫離标準流）	是否使用偏移量	移動位置基準
靜态static	不脫标，正常模式	不可以	正常
相對定位relative	不脫标，占有位置	可以	相對與自己移動
絕對定位absolute	脫标，不占位置	可以	相對于定位父級移動
固定定位fixed	脫标，不占位置	可以	相對于浏覽器移動

定位模式轉換

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