CSS排版程式(6)-圖層控制

屬性名稱

position(定位)、top(上方距離)、bottom(下方距離)、left(左側距離)、right(右側距離)

overflow(溢出方式)、display(顯示設定)、visibility(可見設定)

clip(裁切)、float(浮動)、clear(清除)、z-index(z軸順序)

bottom

說明:指定元素與下方之間的距離,隨著position屬性會改變其絕對或相對位置。範例請參考「版面配置」。

屬性值:auto(自動,預設值)、(長度)、(百分比)、inherit(繼承父元素設定)

clear

說明:解除目標元素的float效果。在屬性值指定的位置中,不可以出現float元素。範例請參考文繞圖

屬性值:none(無,預設值)、left(左邊)、right(右邊)、both(左右兩邊)、inherit(繼承父元素設定)

clip

說明:將元素進行矩形剪裁,必需要在position:absolute下才有效果。在設定的範圍內可以正常顯示,顯示寬度約為右距-左距,高度則為下距-上距。。

屬性值:auto(自動,預設值)、rect((上距),(右距),(下距),(左距))、inherit(繼承父元素設定)

【範例】

img {
    position:absolute;
    clip:rect(10px,400px,100px,120px);
}

【結果】

display

說明:將元素完全隱藏,或改變inline及block顯示方式。原始的block元素有

等,inline元素則有等等。

屬性值:none(隱藏)、inline(線性顯示)、block(方塊顯示)、inherit(繼承父元素設定)

【範例】

使用display屬性可以將整個元素完全隱藏。

【結果】

使用display屬性可以將整個元素完全隱藏。

float

說明:設定元素為浮動元素,進行文繞圖。詳細說明請參考CSS應用實例

屬性值:none(無,預設值)、left(左邊)、right(右邊)、inherit(繼承父元素設定)

【範例】

img { float:right; }

【結果】

W3Schools是一個很好的程式語言教學網站,針對幾種基礎的程式語言都有很詳盡的介紹和說明。本站的CSS教學也有部份內容是參考W3Schools。

left

說明:指定元素與左側之間的距離,隨著position屬性會改變其絕對或相對位置。範例請參考「版面配置」。

屬性值:auto(自動,預設值)、(長度)、(百分比)、inherit(繼承父元素設定)

overflow

說明:當元素內容超過指定的長寬時,決定其溢出方式。

屬性值:visible(繼續顯示,預設值)、hidden(隱藏)、scroll(無論內容是否超出,都顯示捲軸)、auto(只有在內容超出時顯示捲軸)、inherit(繼承父元素設定)

【範例】

.box1 {
    width:100px;
    height:50px;
    border:1px solid green;
    overflow:hidden;
    margin:5px;
}
.box2 {
    width:100px;
    height:50px;
    border:1px solid blue;
    overflow:scroll;
    margin:5px;
}

【結果】

Box1
當元素內容超過指定的長寬時,決定其溢出方式。
Box2

position

說明:指定元素位置的設定模式。範例請參考「版面配置」。

屬性值:static(靜態,預設值)、relative(相對位置)、absolute(絕對位置)、fixed(固定位置)、inherit(繼承父元素設定)

right

說明:指定元素與右側之間的距離,隨著position屬性會改變其絕對或相對位置。範例請參考「版面配置」。

屬性值:auto(自動,預設值)、(長度)、(百分比)、inherit(繼承父元素設定)

top

說明:指定元素與上方之間的距離,隨著position屬性會改變其絕對或相對位置。範例請參考「版面配置」。

屬性值:auto(自動,預設值)、(長度)、(百分比)、inherit(繼承父元素設定)

visibility

說明:將元素隱藏,但會留下元素原本的位置。

屬性值:visible(繼續顯示,預設值)、hidden(隱藏)、inherit(繼承父元素設定)

【範例】

使用visibility屬性可以將元素隱藏。

【結果】

使用visibility屬性可以將元素隱藏。

z-index

說明:決定元素的z軸位置,只會在position屬性為absolute、relative或fixed的元素下作用。範例請參考「改變圖層順序」。

屬性值:auto(自動,預設值)、(數值)、inherit(繼承父元素設定)