CSS基礎-----定位（position）

定位是CSS布局中非常重要的一環，利用定位，可以準确地定義元素框相對于其正常位置應該出現在哪裡，或者相對于父元素或者相對于浏覽器視窗本身

Position

        值：static | relative | absolute | fixed | inherit

       初始值：static

       應用于：所有元素

       繼承性：無

       計算值：根據指定确定

        static：元素框正常生成，塊級元素生成一個矩形框，作為文檔流的一部分，行内元素則會建立一個或多個行框，置于其父元素中

        relative:元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留

        absolute：元素框從文檔流完全删除，并相對于其包含塊定位。元素原先在正常文檔流中所占的空間會關閉。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框

        fixed:元素的表現類似于将position設定于absolute，不過其包含塊是視窗本身

包含塊

在定位中，包含塊包括幾種情況：

1. 在HTML中，根元素就是html元素，在大多數浏覽器中，初始包含塊（根元素）是一個視窗大小的矩形
2. 對于非根元素，則看其定位元素是relative或static，absolute
   1. relative或static：包含塊是由最近的塊級框、表單元格或行内塊祖先框的内容邊界構成
   2. absolute：包含塊設定為最近的position值不是static的祖先元素
      1. 祖先是塊級元素，包含塊則設定為該元素的内邊距邊界
      2. 祖先是行内元素，包含塊則設定為該祖先元素的内容邊界
      3. 如果沒有祖先，元素的包含塊定義為初始包含塊
3. 元素可以定位到其包含塊對的外面（使用負值）

偏移屬性

三種定位機制（relative、absolute、fixed）需要依賴偏移屬性（offset）來實作，這對于完成定位是非常重要的一環

                                                     top、right、bottom、left

             值：<length> | <percentage> | auto | inherit

            初始值：auto

           應用于： 定位元素

           繼承性：無

           百分數： 對于top和bottom，相對于包含塊的高度；對于right和left，相對于包含塊的寬度

           計算值：對于相對定位元素，對于static元素為auto；對于長度值，是相應的絕對長度；對于百分數值，則為指定的值；否則則為auto

偏移屬性定義了距離包含塊相應邊的偏移，而不是包含塊左上角的偏移