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 固定定位
固定定位和前面學習的背景關聯方式很像，
背景定位可以讓背景不隨著滾動條的滾動而滾動，
而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動格式
position：fixed；
注意點1. 固定定位的元素是脫離標準流的，不會占用標準中的空間
2. 固定定位和絕對定位一樣不區分行內/塊級/行內塊級元素
####什麼是z-index屬性
預設情況下所有的元素都有乙個預設的z-index屬性，取值是0，z-index屬性的作用是專門用於控制定位流元素的覆蓋關係的
1. 預設情況下定位流會蓋住標準流的元素
2. 預設情況下定位流的元素後面編寫的會蓋住前面編寫的
3. 如果定位流的元素設定了z-index屬性，那麼誰的z-index屬性比較大，誰就是顯示在上面
注意點從父現象
1. 如果兩個元素的父元素都沒有設定z-index屬性，那麼誰的z-index屬性比較大誰就顯示在上面
2. 如果兩個圓的父元素設定了z-index屬性，那麼子元素的z-index屬性就會失效，也就是說是誰的父元素的z-index屬性比較大誰就會顯示在上面
4 靜態定位
預設情況下就是靜態定位
CSS 絕對定位與相對定位
前幾天遇到了上班的第乙個難題，專案想要實現這樣的效果 實際效果比視覺圖上下多了兩截。但是，聰明如我怎麼可以在我的第乙個頁面上屈服呢！於是在光明正大地看了其他 類似效果的原始碼之後，我也get到了這個技能！原來這裡是用到障眼法，分別畫出兩個細成一條線的div，分別為.border first和.bor...
css相對定位與絕對定位
逆戰班通常情況下，我們用css定位來解決容器疊加排列的 問題，而用浮動解決左右排列的問題。position屬性的值主要有static，relative，absolute，fixed和sticky這幾種，position屬性的預設值為static，也就是沒有定位，元素在正常的文件流中，這時候給元素加偏...
CSS相對定位絕對定位
absolute 絕對定位 一共有四個屬性值 top right bottom left position absolute top 20px 絕對定位的參考點就是他的父級。同理，如果父級沒有定位屬性，就查詢他的爺爺級.relative 相對定位相對定位與絕對定位結合使用 通常情況下，在對元素設定絕...