W3school的CSS筆記(定位)

sayWhat_sayHello發表於2019-02-12

CSS position 屬性

通過使用 position 屬性,我們可以選擇 4 種不同型別的定位,這會影響元素框生成的方式。
position 屬性值的含義:

  • static:元素框正常生成。塊級元素生成一個矩形框,作為文件流的一部分,行內元素則會建立一個或多個行框,置於其父元素中。
  • relative:元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。
  • absolute:元素框從文件流完全刪除,並相對於其包含塊定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種型別的框。
  • fixed:元素框的表現類似於將 position 設定為 absolute,不過其包含塊是視窗本身。

相對定位

如果將 top 設定為 20px,那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素,那麼會在元素左邊建立 30 畫素的空間,也就是將元素向右移動。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

在這裡插入圖片描述

絕對定位

普通流中其它元素的佈局就像絕對定位的元素不存在一樣:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下圖所示:
在這裡插入圖片描述
絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。

CSS 浮動

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

請看下圖,當把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣:

CSS 浮動例項 - 向右浮動的元素
再請看下圖,當框 1 向左浮動時,它脫離文件流並且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中,所以它不佔據空間,實際上覆蓋住了框 2,使框 2 從檢視中消失。

如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框。

CSS 浮動例項 - 向左浮動的元素
如下圖所示,如果包含框太窄,無法容納水平排列的三個浮動元素,那麼其它浮動塊向下移動,直到有足夠的空間。如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素“卡住”:

CSS 浮動例項 2 - 向左浮動的元素

相關文章