CSS定位流排版 相對定位與絕對定位的混用

C. 定位流排版方式

定位流分類

1.相對定位

相對定位就是相對于自己以前在标準流中的位置來移動

設定position屬性為

position: relative;

注意點

1. 相對定位是不脫離标準流的，會繼續在标準流中占用一份空間

2. 在相對定位中同一個方向上的定位屬性隻能使用一個

3. 由于相對定位是不脫離标準流的，是以在相對定位中是區分塊級元素/行内元素/行内塊級元素（即行内元素和塊級元素的特性不變）

4. 由于相對定位是不脫離标準流的，并且相對定位的元素會占用标準流中的位置，是以當給相對定位的元素設定margin/padding等屬性的時候會影響到标準流的布局

應用場景

1. 用于對元素進行微調

2. 配合絕對定位使用

2 絕對定位

position: absolute；

絕對定位就是相對于body來定位

規律

1. 預設情況下所有的絕對定位的元素，無論有沒有祖先元素都以body作為參考物

2. 如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流，那麼這個這個絕對定位的元素就會以定位流的那個祖先元素作為參考點

2.1 隻要是這個絕對定位元素的祖先元素都可以

2.2 指的是定位流是絕對定位/相對定位/固定定位

2.3 定位流中隻有靜态定位不行

3.如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多個元素都是定位流，那麼這個絕對定位的元素會離它最近的那個定位流的祖先元素為參考點

1. 絕對定位的元素是脫離标準流的

2. 絕對定位的元素不區分塊級元素/行内元素/行内塊級元素

3.如果一個絕對定位的元素是以body作為參考點，那麼其實是以網頁首屏的寬度和高度作為參考點，而不是以整個網頁的寬度和高度作為參考點

4.一個絕對定位的元素會忽略祖先元素的padding

相對定位弊端：

相對定位不會脫離标準流，會繼續在标準流中占用一份空間，是以不利于布局界面

絕對定位弊端

預設情況下絕對定位的元素會以body作為參考點，是以會随着浏覽器的寬度高度的變化而變化

子絕父相

子元素用絕對定位，父元素用相對定位

即以父元素作為參考點

絕對定位-水準居中

margin：0 auto；在position：absolute；中無效

解決方式

left：50%；

margin-left：-元素寬度的一半px；

3 固定定位

固定定位和前面學習的背景關聯方式很像，

背景定位可以讓背景圖檔不随着滾動條的滾動而滾動，

而固定定位可以讓某個盒子不随着滾動條的滾動而滾動