CSS Position 位置

CSS Position 位置

  • static (預設值): 如果 position 的值是被設定為 statics 的話,那 top、bottom、left、和 right 的值就都沒有意義了。
  • absolute: 放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素也會跟著改變位置。
  • relative: 將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
  • fixed: 會放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素的位置不會改變。
  • fixed 在 IE 會有不相容問題, 要在網頁最頭端放下面的宣告: (應該就可以)
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto

p {
position:relative;
top:10px;
left:50px;
}
 

overflow 屬性是用來設定當內容放不下時的處理方式。

  • visible: 內容完全呈現,不管放得下放不下。
  • hidden: 放不下的內容就不顯示出來。
  • scroll: 無論內容放得下放不下,都加入上下捲軸及左右捲軸的功能。
  • auto: 當內容放不下時,加上捲軸的功能。

<div style='width:200px; height:70px; border:1px solid #999; overflow:auto;'>
<div style='width:200px; height:70px; border:1px solid #999; overflow:hidden;'>
<div style='width:200px; height:70px; border:1px solid #999; overflow:visible;'>
<div style='width:200px; height:70px; border:1px solid #999; overflow:scroll;'>
 

z-index 屬性是用來決定元素重疊的順序。
當兩個元素有重疊的情況時,z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。

#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;
}