[新手前端]從平面設計前進CSS-7 元素排序規則 | position relative float
繼續說明CSS如何控制HTML元素在頁面裡的空間及位置配置。繼續說明CSS如何控制HTML元素在頁面裡的空間及位置配置。上篇介紹了display屬性,可以針對元素的盒模型有不同的設定,display設定了元素的顯示方式以及和其他元素的互動關係,今天來談談position位置。HTML元素出現在頁面什麼位置可以依據三種主要的規則:普通DOM樹隨著HTML的DOM元素順序display是塊級還是行內不同,元素由上至下,由左而右依序排列。浮動float元素從普通的DOM樹順序中浮到上方圖層,然後依元素被設定的float方向延著母元素邊界排列,display:block的元素會被...
繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。
繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。
上篇介紹了 display 屬性,可以針對元素的盒模型有不同的設定,display 設定了元素的顯示方式以及和其他元素的互動關係,今天來談談 position 位置。
HTML元素出現在頁面什麼位置可以依據三種主要的規則:
普通 DOM樹隨著HTML 的DOM元素順序 display是塊級還是行內不同,元素由上至下,由左而右依序排列。
浮動 float元素從普通的 DOM樹順序中浮到上方圖層,然後依元素被設定的float方向延著母元素邊界排列,display:block 的元素會被蓋住,如果左右的浮動元素堆到需要換行時,會依原本DOM 樹裡的順序,如果float:left 的元素寫在比較前面就會有優先權,空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時,table會無視float,從設為table的元素在DOM樹的位置開始,做出類似block的行為。
見下圖:(數字是元素在 DOM裡的順序)
position 位置position 有以下的參數屬性:static | relative | absolute | fixed | inheritstatic 穩定預設值,穩定就是不接受指定相對位置 left right bottom top
inherit 就是繼承。
absolute/ relative 絕對定位/相對定位:這兩種位置的屬性都接受 left right bottom top 這四個方向的設定,方向設定是元素屬性,表示成 left:0; right:-10px; bottom:50%; top:10em; 這種型式。
方向參數的意思是 元素會依不同的定位點指定的方向開始計算移動距離:left:10px;從定位點的左邊開始計算,將元素右移10px;
right:10px;從定位點的右邊開始計算,將元素...