iT邦幫忙

DAY 9
3

新手前端日記系列 第 9

[新手前端]從平面設計前進 CSS-7 元素排序規則- DOM,float,position

繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。


繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。

上篇介紹了 display 屬性,可以針對元素的盒模型有不同的設定,display 設定了元素的顯示方式以及和其他元素的互動關係,今天來談談 position 位置。

HTML元素出現在頁面什麼位置可以依據三種主要的規則:

  1. 普通 DOM樹
    隨著HTML 的DOM元素順序 display是塊級還是行內不同,元素由上至下,由左而右依序排列。

  2. 浮動 float
    元素從普通的 DOM樹順序中浮到上方圖層,然後依元素被設定的float方向延著母元素邊界排列,display:block 的元素會被蓋住,如果左右的浮動元素堆到需要換行時,會依原本DOM 樹裡的順序,如果float:left 的元素寫在比較前面就會有優先權,空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時,table會無視float,從設為table的元素在DOM樹的位置開始,做出類似block的行為。

見下圖:
(數字是元素在 DOM裡的順序)

  1. position 位置
    position 有以下的參數屬性:static | relative | absolute | fixed | inherit

static 穩定
預設值,穩定就是不接受指定相對位置 left right bottom top

inherit 就是繼承。

absolute/ relative 絕對定位/相對定位:
這兩種位置的屬性都接受 left right bottom top 這四個方向的設定,方向設定是元素屬性,表示成 left:0; right:-10px; bottom:50%; top:10em; 這種型式。

方向參數的意思是 元素會依不同的定位點指定的方向開始計算移動距離:
left:10px;
從定位點的左邊開始計算,將元素右移10px;

right:10px;
從定位點的右邊開始計算,將元素左移10px;

top:10px;
從定位點的上方開始計算,將元素往下移10px;

bottom:10px;
從定位點的下方開始計算,將元素往上移10px;

左左右右的頭都昏了,其實是就離那個邊有多遠的意思。

position:absolute 的元素所用的定位點是視窗左上角、右下角,也就是相對於視窗內緣的邊界,如果母元素有設定為position: relative就會依該元素為基準點,而且該元素的所在圖層又高於浮動的元素。
position:relative 屬性的元素定位點則是以原本這個元素在 DOM樹裡的位罝做對應的變換,作用起來有點像 margin。

同時只要元素有 position屬性,就可以接受 z-index: 屬性,也就是圖層,數字越大圖層越上方,預設是0,可以接受負數。

fixed 鎖住,顧名思義,就是把元素在視窗的位置鎖定,不會和其他元素一樣被捲動,會固定在對應視窗的某個點上。

/* ===
這篇開始進入我不夠熟悉的領域啦~ 有寫錯務必請各位神人糾正啊~~ 感謝
*/

GooglePlus 網友 Vinthen Kuan 幫忙補充以下設定,萬分感謝 ^^

所以relative 之後的元素佔有的空間是一樣的,只是元素看起來位移了
但是absolute 的元素從文件流中移除所以不佔有原本的空間,謝謝你的補充>0<! 

position:relative 有個重點是元素實際佔據的位置並不會因定位值而改變。

position:absolute 的定位點是根據元素的 containing block 而定,
W3C 的說明如下:
The element is positioned relative to its first positioned (not static) ancestor element.
也就是最接近、且定位值非 static 的親代元素;而最上層 (初始) 的 containing block 為 或
設定為 position:absolute 之後,元素會從文件流中移除,不佔據任何文件流中的空間 (如同它不存在該處,原本所應該佔據的位置會被封閉)

position:fixed 的行為類似 absolute,只是元素的 containing block 是整個可視區域 (viewport)

PS. containing block 的說明請參考:
http://www.w3.org/TR/CSS2/visuren.html#containing-block

=
chibc's blog | [新手前端]從平面設計前進 CSS-7 元素排序規則- DOM,float,position


上一篇
[新手前端]從平面設計前進 CSS-6 塊級元素及float, reset
下一篇
[新手前端]從平面設計前進 CSS-8 背景及overflow
系列文
新手前端日記30

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-10-18 00:06:53

沙發

雖然此篇看得有點卡卡的,但光看這幾張精心製作的圖,就覺得樓主超級超級認真的啦~~~

灑花灑花灑花

我要留言

立即登入留言