CSS Position 位置- 1Keydata CSS 語法教學

列出與位置(position) 有關的CSS 屬性。

... 在這哩，以下的HTML 碼， ... 舉例文字。

請注意以上文字的位置：它是在離粉紅色方塊上面10px，及左邊50px 的地方。

CSSPosition位置 CSS教學 > 位置 在CSS中常見的位置(position)屬性有以下幾種： position top right left bottom overflow z-index 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碼，

會顯示出， 舉例文字。

請注意以上文字的位置：它是在離粉紅色方塊上面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:1pxsolid#FFF;  background-color:#FF0000; } #pinkblock{  z-index:2;  position:absolute;  width:100px;  height:80px;  top:50px;  left:50px;  border:1pxsolid#FFF;  background-color:#FF00FF; } 以下的HTML碼， 會顯示出， 從以上可見，粉紅色方塊(pinkblock)的z-index值(2)比紅色方塊(redblock)的z-index值(1)高，因此粉紅色方塊在上面。

下一頁：CSS文字 Copyright©2022 1keydata.com 版權所有 CSS語法教學   CSS語法 CSS套用方式 CSS媒體類別 CSS串接 CSS繼承 CSSClass與ID CSSDiv與Span CSS長度單位   CSS盒子模式 CSS邊界(Margin) CSS邊框(Border) CSS留白(Padding) CSS背景(Background) CSS顏色 CSS字體 CSS連接 CSS清單(List) CSS表格(Table) CSS位置(Position) CSS文字(Text) CSS浮動(Float) CSS清除(Clear) CSS滑鼠游標圖案   CSS樣式