位置 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; | 如果內容超出去,就出現捲軸 |