CSS 語法 12：位置 static, absolute, relative, z-index, overflow

位置 position

用 position 來定義元素位置時，有意下幾種參數值。

• static

position:static;(預設值)
top:15px;
left:20px;

元素將放在預設的位置，在此條件下 top, bottom, left, right 的位置宣告都不會生效。

• absolute

元素位置將依據它的父層(上層)元素為基礎，設定相對位置。如果它沒有被包含在任何元素內，則以瀏覽器為他的父層元素。

<style>

.bigbox{
position:absolute;
top:60px;
left:20px;
background-color:#0099cc;
color:#fff;
font-size:14px;
width:200px;
height:80px;
}

.smallbox{
position:absolute;
top:15px;
right: 0;
background-color:#ff9900;
color:#fff;
font-size:14px;
width:100px;
}

</style>

<div class="bigbox">
<div class="smallbox">
</div>
</div>

橘色盒子在藍色盒子裡面，所以 top:15px 和 right:0px 都是以藍色盒子的邊緣為基準。

• relative

relative 就是用 top, bottom, left, right 來控制元素，和「原本應該出現的位置」相對的位置。

<style>

.bigbox{
position:relative;
top:30px;
left:20px;
border:solid 3px black;
background-color:#0099cc;
color:#fff;
font-size:14px;
width:200px;
height:200px;
}

.smallbox{
position:relative;
top:0px;
left: 50px;
background-color:#ff9900;
color:#fff;
font-size:14px;
width:100px;
}
</style>

<div class="bigbox">big box</div>
<div class="smallbox">用top, bottom, left, right <br>來控制元素，<br>和「原本應該出現的位置」相對的位置。</div>

＊眼尖的人會看到，因為 big box 已經設定 top:30px 所以 small box 雖然設定 top: 0px 但是還是覆蓋到 big box，而覆蓋到的範圍剛好是 30px。

• z-index

z-index 屬性用來設定當兩個元素相疊時，哪一個在上面、哪一個在下面。
z-index 的值越大，越上層。

以上面的藍色盒子和橘色盒子為例
如果我們把橘色盒子(smallbox) 和藍色盒子 (bigbox) 的 z-index 設定為

.smallbox { //橘色盒子
z-index: 1;
}

.bigbox { //藍色盒子
z-index: 2;
}

則藍色盒子會壓在橘色盒子上面

＊重疊在一起的盒子，如果想設定透明度，可以用 opacity 屬性，值從0(完全透明)到1(完全不明)，所以通常是用零點幾來表示。

opacity:0.6;

• overflow

overflow: visible;	呈現所有內容，如果放不下就溢出去
overflow: hidden;	放不下的內容就隱藏
overflow: scroll;	強制出現水平和垂直捲軸
overflow: auto;	如果內容超出去，就出現捲軸

Daco Note