位置
在 CSS 中常見的位置 (position) 屬性有以下幾種：
position
top
right
left
bottom
overflow
z-index
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 {
background-color:#FF00FF;
width:500px;
height:60px;
}
p {
position:relative;
top:10px;
left:50px;
}
|
在這哩，以下的 HTML 碼，
會顯示出，
請注意以上文字的位置：它是在離粉紅色方塊上面 10px，及左邊 50px 的地方。
overflow
overflow 屬性是用來設定當內容放不下時的處理方式。可能的值包括：
- visible: 內容完全呈現，不管放得下放不下。
- hidden: 放不下的內容就不顯示出來。
- scroll: 無論內容放得下放不下，都加入上下捲軸及左右捲軸的功能。
- auto: 當內容放不下時，加上捲軸的功能。
以上這四個值的例子如下：
auto
我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。
這裡展現的值是 auto。
|
hidden
我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。
這裡展現的值是 hidden。
|
visible
我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。
這裡展現的值是 visible。
|
scroll
我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。
這裡展現的值是 scroll。
|
z-index
z-index 屬性是用來決定元素重疊的順序。換言之，當兩個元素有重疊的情況時
，z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。
舉例來說，假設我們有以下的 CSS 碼：
|
#redblock {
z-index: 1;
position:
absolute;
width:80px;
height:100px;
top:20px;
left:20px;
border: 1px solid #FFF;
background-color: #FF0000;
}
#pinkblock {
z-index: 2;
position: absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border: 1px solid #FFF;
background-color: #FF00FF;
}
|
以下的 HTML 碼，
<div id="redblock"></div>
<div id="pinkblock"></div>
|
會顯示出，
從以上可見，粉紅色方塊 (pinkblock) 的 z-index 值
(2) 比紅色方塊 (redblock) 的 z-index 值 (1) 高，因此粉紅色方塊在上面。
|
