在 CSS 中常見的位置 (position) 屬性有以下幾種:
position
position 屬性制定出要用哪一類的位置。可能的值有:
- static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話,那 top、bottom、left、和 right 的值就都沒有意義了。
- absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素也會跟著改變位置。
- relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
- fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素的位置不會改變。
top, right, bottom, left
每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。
讓我們來看個例子:
CSS 碼:
div { p { |
在這哩,以下的 HTML 碼,
<div> <p>舉例文字。 </div> |
會顯示出,
舉例文字。
請注意以上文字的位置:它是在離粉紅色方塊上面 10px,及左邊 50px 的地方。
overflow
overflow 屬性是用來設定當內容放不下時的處理方式。可能的值包括:
- visible: 內容完全呈現,不管放得下放不下。
- hidden: 放不下的內容就不顯示出來。
- scroll: 無論內容放得下放不下,都加入上下捲軸及左右捲軸的功能。
- auto: 當內容放不下時,加上捲軸的功能。
z-index
z-index 屬性是用來決定元素重疊的順序。換言之,當兩個元素有重疊的情況時,z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。
舉例來說,假設我們有以下的 CSS 碼:
#redblock { |
以下的 HTML 碼,
<div id="redblock"></div> <div id="pinkblock"></div> |
粉紅色方塊 (pinkblock) 的 z-index 值 (2) 比紅色方塊 (redblock) 的 z-index 值 (1) 高,因此粉紅色方塊在上面。
留言列表