:::

9. CSS的位置控制

一、用position來控制元件位置

  1. position:static「靜態」這是網頁的預設值。
  2. position:relative 「相對」指的是相對他原來所在的位置(下一個元素並不會隨之起舞),可用 top、bottom、left、right來調整該元素位置。
  3. position:absolute「絕對」指的是相對於整個網頁最左上角的位置(此元素會飄起來,下一個元素會當作它不存在一樣遞補其位置),一樣可用top、bottom、 left、right來調整該元素位置。
  4. position:absolute搭配z-index,可以將元素進行上下排列。一般而言,z-index預設值為0。
  5. position:fixed「固定」指的是相對於整個視窗最左上角的位置(此元素也會飄起來,下一個元素一樣當作它不存在而遞補其位置),可用top、bottom、 left、right來調整該元素位置,不管視窗如何捲動,永遠保持在固定位置(可用來做浮動視窗)。要注意的是該死的IE6要使用!DOCTYPE 聲明指定standards-compliant(標準)模式才能正常使用。

二、position:relative + position:absolute

  1. 當position:relative包著position:absolute的時候,後者就會改以前者的位置危基準,而非整個視窗。

三、兩欄式(或三欄)

  1. 將b設為relative寬度為960。b1、b2、b3均設為absolute,寬度均為320px。
  2. 將b1設為「left:0px; top:0px;」,b2設為「left:320px;top:0px;」,b3設為「right:0px; top:0px;」

四、浮動float

  1. b1、b2、b3的位置均不設,寬度均為320px,然後均設為float:left,一樣可達成分欄位效果。
  2. 配合 clear:both; 可以將浮動效果清除掉。

五、練習範例:

<div id='a' class='big'>a</div>
<div id='b' class='big'>b
<div id='b1'>b1</div>
<div id='b2'>b2</div>
<div id='b3'>b3</div>
</div>
<div id='c' class='big'>c</div>

 參考資源1:http://www.w3schools.com/css/pr_list-style-type.asp

 參考資源2:http://www.w3school.com.cn/css/css_reference.asp

 


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

36人線上 (12人在瀏覽線上書籍)

會員: 0

訪客: 36

更多…