css學習筆記–定位流

相對定位
絕對定位
固定定位

一、相對定位（relative）
1.什麼是相對定位
 相對自己以前的在標準流的位置移動
 示例格式：
  position：relative;
  left: 30px
  top: 50px;

2.注意點：
 2.1不會脫離標準流，會繼續在標準流中佔用一定空間；
 2.2在設定樣式時，同一方向上（水平或垂直方向）的定位屬性只能使用一個；
 2.3由於相對定位是脫標的，所以在相對定位中區分塊級元素/行內塊級元素/行內元素；
 2.4在給相對定位元素設定margin/padding等屬性時，會影響到標準流的佈局（margin屬性作用於定位前在標準流中的盒子，而不是相對定位後的盒子）

3.應用場景：
 3.1用於元素的微調；
 3.2配合後面學習絕對定位來使用；

二、絕對定位(absolute)
 1.絕對定位的元素是脫標的；
 2.絕對定位的元素不區分塊級元素/行內塊級/行內元素；
 3.絕對定位是相對於body 的定位；
 4.絕對定位元素水平居中：
 格式：
  position: absolute;
  left:50%;
  margin-left: 元素負的寬度的一半；

規律：
 1.預設情況下，絕對定位元素無論有沒有祖先元素，它都會以body作為參考點；
 2.如果一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考；即，在祖先盒子中加上屬性，position:
注意點：
  2.1只要是這個絕對定位元素的祖先元素都可以；
  2.2上面指的定位流是指絕對定位/相對定位/固定定位；

 3.如果一個絕對定位元素的祖先元素中有多個元素都是定位流，那麼這個絕對定位元素會以離他最近的那個定位流的祖先元素作為參考點；

注意點：
 1.如果一個絕對定位元素是以body作為參考點，那麼其實是以網頁首屏（即螢幕顯示大小）的寬度和高度作為參考點；而不是以整個網頁的寬度和高度作為參考點；
 2.一個絕對定位的元素會忽略祖先元素的padding;

相對/絕對定位的區別比較：
 1.相對定位弊端：不脫標，在標準流中佔用位置；
 2.絕對定位弊端：以首屏為body為基準，隨著滾動，縮放頁面，元素會隨著瀏覽器大小不同變化；

 3.兩者結合使用：子絕父相

三、固定定位(position: fixed)

四、z-index屬性
 1.預設情況下所有元素都有一個預設的z-lndex屬性，取值為0；他的作用是專門用於控制定位流元素的覆蓋關係；
  1.1預設情況下，定位流的元素會覆蓋標準流的元素；
  1.2預設情況下，定位流的元素後面編寫的會覆蓋前面編寫的（body中）；
  1.3如果定位流的元素設定了z-index屬性，那麼誰的z-index屬性比較大，誰就顯示在上面（取值可為1，2，3…）；

注意點：
 1.如果兩個元素的父元素都沒有設定z-index元素，那麼誰的index屬性大，誰就顯示在上面；
 2.如果兩個元素的父元素設定了z-index屬性，那麼子元素的index屬性聚會失效，也就是說誰的父元素的z-index屬性誰大誰就會顯示在上面；
 
 
 

===筆記內容來自於《從零玩轉HTML5前端+跨平臺開發》