CSS 位置(Position)屬性

介紹 位置(Position)屬性與屬性值Static(靜態)、Fixed(固定)、Relative(相對)、Overlapping Elements(元素重疊)、 Overflow(溢出)

本章節用於區塊元素( block elements)的對齊是相對於螢幕的對齊,與文字對齊是不一樣的樣式語法:


position:static

瀏覽器的內定值 ,若設為static時則由上而下排列 ,若加設top、right 、bottom和 left 就不會動作了。

position:fixed

以固定位置來定位,將元素(element)固定在指定位置,不隨瀏覽器捲軸捲動而改變位置。

position:relative

以相對位置來定位, HTML元素(element) ,可用top、right 、bottom和 left來放置其位置。

position:absolute

以絕對位置來定位, HTML元素(element)會隨著瀏覽器內的指定位置,會隨著瀏覽器捲軸(Scroll)捲動而移動。

position:inherit

繼承 父層的 position 定位的屬性值。

絕對位置 HTML元素(element)會隨著瀏覽器內的指定位置,會隨著瀏覽器捲軸(Scroll)捲動而移動 。

位置指定top、right、bottom、 left 位置值可以是長度px、% 、auto。

top:10px;

right:12px;

bottom:18px;

left :20px;


靠左對齊 :

position:absolute;
left:0px;


靠右對齊 :

position:absolute;
right:0px;

範例::CSS 位置屬性的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看變化了什麼


元素重疊( Overlapping Elements)

重疊? 總要有上有下吧?! 這裡可學到上下的指定喔~

z-index: 正或負的數字

本區的z-index數值較大,放上層。

本區的z-index數值較小,在下層。

z-index: 數值

指定z-index: 的數值越高的元素,疊在越上面


溢出(overflow)

溢出? 溢出什麼? 假設我們用div 做了一固定的長x寬的版面空間,但版面內寫的內容超出它的寬度,可做的畫面處理方法(隱藏、捲軸..) 。

你可以在上方編輯區之<table class='right'>區間內做實驗觀測:

範例::CSS 溢出/重疊屬性的檢視

動手實驗一下 : 將 屬性值改變看看變化了什麼