W3school的CSS筆記(定位)
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 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣:
再請看下圖,當框 1 向左浮動時,它脫離文件流並且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中,所以它不佔據空間,實際上覆蓋住了框 2,使框 2 從檢視中消失。
如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示,如果包含框太窄,無法容納水平排列的三個浮動元素,那麼其它浮動塊向下移動,直到有足夠的空間。如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素“卡住”:
相關文章
- W3school的CSS筆記(框模型)CSS筆記模型
- W3school的CSS筆記(基礎篇)CSS筆記
- CSS 小結筆記之定位CSS筆記
- web前端學習筆記(CSS盒子的定位)Web前端筆記CSS
- CSS學習筆記——傳統定位篇CSS筆記
- CSS tutorials (w3school)CSS
- 前端筆記之CSS(下)浮動&BFC&定位&Hack前端筆記CSS
- CSS筆記CSS筆記
- 【CSS】【11】CSS盒子的定位CSS
- CSS的定位:positionCSS
- CSS定位CSS
- CSS——定位CSS
- 筆記:面試 - css筆記面試CSS
- 《精通css》筆記CSS筆記
- 學習筆記19:影像定位筆記
- 6.css的定位CSS
- css之定位CSS
- CSS_定位CSS
- CSS3筆記CSSS3筆記
- HTML+CSS筆記HTMLCSS筆記
- 讀“css世界”筆記CSS筆記
- CSS技術筆記CSS筆記
- Web雲筆記–CSSWeb筆記CSS
- CSS簡潔筆記CSS筆記
- CSS 學習筆記CSS筆記
- CSS中的絕對定位與相對定位CSS
- css中背景定位的方法CSS
- 《精彩絕倫的css》筆記《一》CSS筆記
- 筆記-10.4、HTML-CSS濾鏡筆記筆記HTMLCSS
- css絕對定位和相對定位的差別CSS
- CSS/CSS3語法新特性筆記CSSS3筆記
- CSS 定位詳解CSS
- css定位詳解CSS
- CSS絕對定位CSS
- CSS定位機制CSS
- CSS之定位PositionCSS
- css 定位器CSS
- 前端筆記之CSS(上)前端筆記CSS