CSS中的定位介紹

一、什么是定位

改變元素在頁面中的位置

二、定位的分類

1、普通流定位

2、浮動定位

3、相對定位

4、絕對定位

5、固定定位

三、普通流定位

頁面中元素的默認定位方式，默認文檔流，從上往下，從左往右

1、每個元素都在頁面有自己的空間

2、每個元素都是從父元素的左上角開始顯示

3、塊級元素都是按照從上到下的方式逐行排列，每個元素獨占一行

4、行內元素是多個元素在一行顯示，從左往右逐個排列

四、浮動定位

1、當元素設置浮動后，該元素脫離默認文檔流，后面的元素會上前補位。當前元素會在當前行，向左或者向右排列

float：left、right、none

特點：

（1）、元素一旦浮動，就脫離文檔流了，不占據頁面空間，后面會上前補位

（2）、浮動元素會停靠在父元素的左邊/右邊，或者其他已經浮動元素邊緣

（3）、浮動就是解決多個塊級元素在一行顯示的問題

2、浮動引發的特殊情況

a、（1）當父元素顯示不下所有已浮動元素的時候，顯示不下的幾個將換行顯示，換行顯示的規則：優先上浮，之后向左/右對齊

（2）浮動元素占位，浮動元素會根據浮動方向，占據方向上的位置，不讓其他后面浮動元素占用

b、元素一旦浮動，如果沒有定義寬度，寬度會以內容為準

c、元素一旦浮動起來，就變成了塊級元素，可以設置寬高，可以設置上下外邊距

d、文本，行內元素，行內塊元素是不會被浮動元素壓在下方。而是巧妙的避開了所有浮動元素，圍繞者浮動元素顯示

e、清除浮動：元素一旦浮動起來會對后續元素帶來一定影響（后續元素會上前補位），如果后續元素不想上前補位，那么給后續元素設置clear，清除前面浮動元素帶來的影響

clear：left/right/both

f、高度坍塌，塊級元素的高度如果不設置，高度以內部元素內容為準，但是如果內部元素都是浮動元素，浮動元素不占據頁面空間，父元素的高沒有了

解決方案：

    1、直接為父元素設置高度，弊端：不知到父元素高度

    2、父元素也浮動，弊端：浮動會影響后續元素

    3、overflow：hidden，弊端：當元素真的需要顯示溢出內容時，就顯示不出來了

    4、在父元素中追加一個空的塊級元素，并設置clear：both

3、顯示

1、顯示方式

display

元素在頁面中的顯示表現形式（塊級，行內，行內塊）

取值：

（1）none：隱藏，不顯示元素，不占據位置

（2）block：讓元素的表現形式和塊級元素一樣，特點：獨占一行，可以設置寬高，垂直外邊距

（3）inline：讓元素和行內元素一樣，特點：多個元素公用一行，不能設置寬高和垂直外邊距

（4）inline-block：讓元素的表現形式和行內塊一樣，特點：多個元素在一行中顯示，但是可以設置寬高和垂直外邊距

（5）table：讓元素的表現形式和table一樣，特點：尺寸以內容為準，每個元素獨占一行，允許修改尺寸

2、顯示效果

visibility

取值

visible：默認可見

hidden：隱藏

display：none和visibility：hidden的區別  ：display隱藏，脫離文檔流，不占據頁面空間，visibility不脫離文檔流，占據頁面空間

3、透明度

opacity

取值：0～1 越小越透明

opacity和rgba的區別：opacity作用于元素，只要跟元素相關的顏色都會跟著透明，可以作用到子元素，rgba只改變當前元素的透明度，不會影響其他元素

4、垂直對齊方式

vertical-align

取值：top/middle/bottom

使用場合：

（1）table標簽中，控制文字的垂直對齊，取值：top/middle/bottom

（2）img標簽，控制圖片與前后文字的垂直對齊方式,取值：top/middle/bottom/baseline

5、光標

cursor：

取值：

（1）default：箭頭

（2）pointer：手

（3）text：I

（4）crosshair：十字

（5）wait：沙漏或者轉圈

（6）help：問號

五、定位

1、定位的屬性

position：

取值：

（1）static： 默認值，靜態，默認文檔流

（2）relative：相對定位

（3）absolute:絕對定位

（4）fixed：固定定位

    專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

元素的position設置為relative/absolute/fixed中任意一個值，該元素被稱為已定位元素

偏移屬性

top/bottom/right/left

left：100px   向由移100px

2、相對定位

元素相對于原來的位置偏移某個距離，沒有脫離默認文檔流，頁面上的位置不會被其他元素補位

語法：position：relative；必須配合偏移屬性使用

使用場合：作為絕對定位的祖先元素

（1）位置微調

3、絕對定位

絕對定位的元素會脫離默認文檔流，后面元素會向前補位，絕對定位的元素會相對于離他最近的已定位的祖先元素去實現定位，如果所有祖先元素不是已經定位元素，相對于body去實現定位

屬性：position：absolute；配合偏移屬性使用

使用場合：有層疊效果時

4、固定定位

將元素固定在頁面的某一個位置，元素不會隨滾動條發生位置變化，一直固定在可是區域內

語法：

position：fixes；配合偏移屬性使用

注意：

（1）固定定位脫離文檔流，不占頁面空間

（2）固定定位元素變為塊級元素

（3）相對于body實現位置的偏移

堆疊順序

元素變為已定位元素，有可能出現堆疊，想修改堆疊順序

z-index

取值：無單位的數字，數字越大，元素越靠上顯示，父子元素間z-index無效，永遠都是子元素在父元素上面，只有已定位元素才能使用z-index