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 {   background-color:#FF00FF;   width:500px;   height:60px; } p {   position:relative;   top:10px;   left:50px; }

在這哩，以下的 HTML 碼，

<div>   <p>舉例文字。 </div>

會顯示出，

請注意以上文字的位置：它是在離粉紅色方塊上面 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) 高，因此粉紅色方塊在上面。