天天看點

CSS基礎-----定位(position)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

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