定位的原理很簡單。網(wǎng)頁設計者利用定位,可以準確地定義元素框相對于其正常位置應該出現(xiàn)在哪里,或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
深入討論各種定位之前,網(wǎng)頁設計人員最好先來了解有哪些類型的定位,以及這些不同類型之間有什么區(qū)別。我們還要對一些基本思想給出定義,這些思想是理解定位如何工作的基礎。
通過使用position屬性,可以選擇4種不同類型的定位,這會影響元素框生成的方式。
position
值:static | relative | absolute | fixed | inherit
初始值:static
應用于:所有元素
繼承性:無
計算值:根據(jù)指定確定
position值的含義如下:
static
網(wǎng)站建設元素框正常生成,塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創(chuàng)建一個或多個行框,置于其父元素中,
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除,并相對于其包含塊定位,包含塊可能是文檔中的另一個元素或者是初始包含塊(見下一節(jié)的介紹)。網(wǎng)站建設上元素原先在正常文檔流中所占的空間會關閉,就好像該元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將position設置為absolute,不過其包含塊是視窗本身。
現(xiàn)在先不要太擔心具體的細節(jié),本章后面還會逐個地介紹上述各類定位。在此之前,需要先來討論包含塊。