我們在本堂課前幾個小節提到過內部留白與外部留白，那外部留白 (margin) 的正值是可以往外推，舉例來說，當你的 margin-left 是正值， 代表你的方塊會被往右推。往右合理啊～因為原本網頁的元件就是從左到右的。那如果你的方塊想要往左移動呢？這時可以將 margin-left 設定為負值， 此時方塊就會往左推～只是，方塊可能就會『覆蓋掉左側的元素』喔！

例題 5.3.A：將 unit05-2-3.html 轉存成 unit05-3-1.html，並依據底下的方式來修改設計：

• 讓 content 這個方塊向左 50 個像素，向下 50 個像素，且增加背景為白色，但有 20% 的不透明度

檔名就設定為 /www/web2/unit05-3-1.html，完成的圖示會有點像底下這樣：

在網頁的預設情況下，如果有元素互相重疊的話，那麼後出現的將會覆蓋較早出現的元素。如果你想要改變這種順序的話，可以加上 z-index 這個屬性。 不過， z-index 要能真實生效，得要加上 position 這個屬性才行。關於 position 等等再來說明，現在你只要加上 position: relative 這個設定就好。

• z-index: N ：N 為一個數值，多個具有 z-index 的元件，較大的 z-index 會覆蓋在較小的 z-index 元件上。

例題 5.3.B：將 unit05-3-1.html 轉存成 unit05-3-2.html，並依據底下的方式來修改設計：

• 三個方塊 (bigdiv, figdiv, content) 全部加上位置為相對位置 (position:relative)
• 讓照片覆蓋在文字框上面

檔名就設定為 /www/web2/unit05-3-2.html，完成的圖示會有點像底下這樣：

正常的情況下，後面出現的元素會覆蓋掉前面出現的元素。可以透過 z-index 來修改圖層的顯示順序！

我們知道，在網頁的正常情況底下，所有的區塊元素 (block) 都會佔滿整個橫列空間，即使你給的寬度變小，小到右側可以容納系一個元素，但是， 正常情況下，區塊元素就是會自己佔用一整個橫列區塊，所以新的區塊還是會在下一行出現，不會出現在你給的小寬度的那個元件的右邊。

如果需要修訂這個問題，隨意改變區塊或方塊出現的位置時，就得要考量到這個區塊與週邊或父元素或瀏覽器之間的關係了。這時你就得要透過 position (位置) 這個屬性的協助：

• position: {static|relative|absolute|fixed}：這幾個屬性值的意義是這樣的：
  • static：靜態的正常流向，就是一般網頁上看到的元件輸出方式，由左而右，由上而下的元件相關性。
  • relative：跟 static 很類似，但是你可以增加上、下、左、右的移動，來讓這個元素在目前的位置上面進行偏移。 比較特別的是，其他週邊的元素並不會被這個元素的移動而被影響！所以，如果你的版面配置是正常的，但只是想要移動某個元件， 那麼將該元件加上 relative 的屬性值之後，就可以單獨對這個元素做變動了！寫會動的元件的 javascript 時，這個項目也挺重要。
  • absolute：絕對位置～最簡單的想法，就是位置以父元素的左上角原點 (起始位置) 來更動的！不過你得要特別注意，跟這個元素在同一個父元素的其他元素， 會對這個元素『視而不見』！因為這個絕對位置的元素已經自己獨立存在於父元素的環境下了！所以，此時你會發現到整個元素浮動在畫面上！而其他元素會被覆蓋喔！
  • fixed：那個 absolute 主要的參考座標是父元素，而這個 fixed 的參考座標則是『瀏覽器！』你應該常常發現很多網站的許多導覽列都是固定在瀏覽器上的特定位置， 那就是 fixed 的功能！
• left: Npx：針對參考座標之左邊留白的距離
• right: Npx ：針對參考座標之右邊留白的距離
• top: Npx ：針對參考座標之上方留白的距離
• bottom: Npx ：針對參考座標之下方留白的距離

會加入 position 就是希望自己能夠調整版面的，因此就會需要上、下、左、右各個方向的留白距離。不過不同的屬性值參考座標是不同的！如同上面的說明， 參考座標簡略說明如下：

• relative 時：依據自己預設的位置為參考座標，進行移動
• absolute 時：依據父元素的原點為參考座標，進行移動
• fixed 時：依據瀏覽器的原點為參考座標，進行移動

當然我們知道任何物件的原點在瀏覽器的環境下，就是左上角那一點～。讓我們來玩一玩這個位置產生的效果！同時透過底下的練習了解一下網路線等級的意義喔！

例題 5.3.C：依據這三張圖 cat 5, cat 6, cat 6a 搭配 這個檔案 的內容， 嘗試完成底下的設計：

• 在 page 的方塊設定上，(1)寬度給予最小寬度為 800 像素，(2)給予框線為 1px solid grey 的設定，(3)位置給予相對位置。
• 先看一下原始網頁的呈現方式，了解一下尚未處理成分欄位顯示的模樣，以理解 block 與 inline-block 的差異。
• 在所有方塊 (box1, box2, box3) 都有呼叫的 boxall 當中，給予底下的設定： (1)給予框線 1px solid gray 的設定；(2)寬度給予 30% 的寬度即可； (3)內部留白請保留 10 像素；(4)請使用 inline-block 的格式來處理；(5)垂直對齊使用上方對齊
• 在 boxall 裡面的圖片 (img) ，請設定寬度為 100% 即可

檔名就設定為 /www/web2/unit05-3-3.html，完成的圖示會有點像底下這樣：

上面的練習是一個簡易的三欄排版的實做方式，只要將框線拿掉，就可以作為一個排版的樣式了。不過這不是本節課的重點，本節課的重點在討論 position 的用法喔！ 現在讓我們來了解一下相對於目前這個正常位置的版面移動方式，就是 relative 的移動方式：

例題 5.3.D：將 unit05-3-3.html 轉存成 unit05-3-4.html，並完成底下的設計：

• 在 page 的方塊設定上面，增加相對位置的設計；
• 在 box2 的方塊設定上面，(1)增加相對位置的設計： (2)box2 方塊頂端留白 50 像素； (3)方塊向左移動 50 像素，因此會覆蓋 box1 的方塊才對； (4)增加底色為白色不透明

檔名就設定為 /www/web2/unit05-3-4.html，完成的圖示會有點像底下這樣：

由上面這個練習我們可以知道 relative 的動作是僅有自己的位置會變動，就不會影響到原本的元素的排版！所以只有自己要變動時， 或者是你已經知道既有的版面配置型態時，若有更動某個特定的元素，就用 relative 吧！

在某些父元素的方塊已經有固定寬、高的情況底下，你想要讓特定元素依據你的特殊需求出現在任意的地方時，建議使用依據父元素原點為參考座標的絕對位置 (absolute) 來處理比較妥當！舉例來說，如果 box1, box2, box3 是互相稍微重疊的情況，那可以這樣做：

例題 5.3.E：將 unit05-3-4.html 轉存成 unit05-3-5.html，並完成底下的設計：

• 再次確定 page 的方塊中，位置必須為 relative 才行！而且最小高度給予 300 像素；
• boxall 的設定中： (1)取消 vertical-align 與 inline-block 的設定； (2)寬度全部指定改為 40%； (3)位置全部改為 absolute； (4)增加底色為白色且 80% 的不透明度；其他保留原始設定
• box1 的距離，上、左都是 0 像素
• box2 的距離，上為 50 像素，左為 25% 的距離
• box3 的距離，上為 100 像素，左為 50% 的距離

檔名就設定為 /www/web2/unit05-3-5.html，完成的圖示會有點像底下這樣：

你會發現對於子元素出現的位置來說，子元素可以跳脫父元素的牢籠，而且不會讓父元素管制～除非父元素指定了 visibility 或者是 overflow...， 否則子元素可以出現在任何你想要它出現的地方了。這對於下拉式選單的製作相當有幫助！尤其可以跳脫父元素的框架。不過，如果要用到下拉式選單的時候， 記得可能要給予 z-index 的圖層大一點，否則選單容易被後面出現的元素擋住喔！

如果你想要在畫面的正中央最下方處增加一個寬高為 70 像素 X 30 像素的方框，這個方框裡面出現 Top 的字樣，且連結到本頁的最上方， 這個方塊永遠都存在畫面中，可以怎麼做呢？這時就得要使用 fixed 的位置囉！

例題 5.3.F：將 unit05-3-5.html 轉存成 unit05-3-6.html，並完成底下的設計：

• 在原始的 HTML 程式碼當中，在 <div class="page"> 上面增加兩行：
  • 第一行增加 <a id="mytop"></a> 的字樣
  • 第二行增加 <div class="gogotop"><a href="#mytop">Top</a></div>
• 針對 gogotop 的類別增加底下的屬性：
  • 寬度為 70 像素、高度為 30 像素，加上框線 1px solid gray，padding 為 0 喔！
  • 位置使用 fixed，且底部距離為 10 像素，距左側 50% 的寬度，但是具有 margin-left 為 -35 像素 (思考為何如此設計？)
  • 圖層位置 (z-index) 設定為 10 比較高
• 在 gogotop 內的 a 設定為：背景色黃色且有 70% 的不透明度，字體為深綠色，沒有底線，文字置中，且使用 block 顯示

檔名就設定為 /www/web2/unit05-3-6.html，完成的圖示會有點像底下這樣：

許多網站會有一些特殊功能的方塊放置在某些特定的角落，例如上面例題的回到頁首的功能，就可以使用 fixed。像是 FB 的導覽列， 或者是頁尾宣告列，都是使用 fixed 固定的呢！但是你不要隨意使用這個項目喔！因為你的客戶群不見得喜歡畫面被擋住！ 以上題為例，中央部份如果有文字，就會被擋住啦！

這一個小節我們從 float 到 margin 到使用 position 的方式來進行排版，那麼，哪一種方式最適合呢？其實還是因各種版面配置的問題，而有不同的選擇：

• 所有子元素都在父元素的空間規範內時：這種情況使用 position: relative 或 float 或 vertical-align 就可以了！ 而且父元素可以使用 overflow: auto 來自動延伸高度，同時也能夠使用 margin 來微調每一個子元素自己的位置即可。
• 需要跳脫父元素的區域空間，而且依舊跟著整體網頁流動的情況：通常使用者會發現到網站都有導覽列 (就是有按鈕，可以超連結到其他頁面去的區塊)， 那個導覽列通常是使用 ul 這個清單標記來完成的。我們知道 ul 就是個區塊標記，而 li 則是 ul 的子元素。但是下拉式選單是 ul 內的 ul， 下拉式選單的區域通常是跳脫父元素的空間區域的。這時就得要使用 position: absolute 的方式，搭配 top, left 或 right, bottom 的方式， 才有辦法定義出子選單的位置。而這個子選單的位置也不是固定在瀏覽器，而是固定在網頁上的某個區域，因此選單會隨著網頁而移動的意思。
• 需要固定在瀏覽器的某個位置時：例如某些網站的左右兩邊會有特定的箭頭引導你往前或往後閱讀，尤其在一般新聞網站或較有規模的教學網站， 通常會有這個貼心的服務。因為這個箭頭按鈕是固定在瀏覽器上的，所以當然就是使用 postition: fixed 來規定元素出現在某個瀏覽器的特定位置喔！

總之，記得，某些按鈕、選單的設計情況下，使用的可能是 absolute 或 fixed，若是一般欄位的排版，大概就是 relative 與 float 來協同處理即可。 如果需要欄位整體寬度固定，就使用 width, height 搭配像素，如果欄位寬度是可變動的，那使用 min-width, min-height 搭配百分比或像素， 應該就可以完成你所需要的版面型態了。

由於某些特定版面規劃的關係，你可能只會用到某個固定寬高的空間 (父元素空間受限)，但是這個空間要塞入的東西太多 (子元素物件太多)， 在網頁預設的情況下，所有的子元素物件會跑出父元素的框框之外，這個情況就稱為溢出 (overflow)。在 overflow 屬性的預設值為 visible， 意思就是可以在父元素外頭被瞧見的意思。那 overflow 還有哪些屬性值？

• overflow: {visible|hidden|scroll|auto}：屬性值意思是 {資料不會被留置在父元素內，會超出父元素的框框之外|超出的部份會被隱藏|父元素會產生拉條， 讓使用者可以拉動拉條在父元素內查看超出的部份|少少資料不會有拉條，超出父元素空間的資料量時，才會出現拉條}

讓我們以底下的例子來說明一下 overflow 的用法：

例題 5.4.A：將 unit05-3-3.html 轉存成 unit05-4-1.html，並完成底下的設計：

• 完全保留原有的 CSS 特性，但是修改或增加一些屬性
• 針對 boxall 給予 500 像素的固定高度，修改完之後查看一下結果
• 針對 box1 給予 overflow: auto 的屬性
• 針對 box2 給予 overflow: hidden 的屬性
• 針對 box1 給予 overflow: scroll 的屬性

檔名就設定為 /www/web2/unit05-4-1.html，完成的圖示會有點像底下這樣：

單純加上 boxall 的寬、高的框線之後，你會發現到最外框的 page 類別竟然高度也減小了！然後，文字竟然可以超出框線之外， 這就是預設的 overflow: visible 的屬性值關係。若分別在 box1, box2, box3 上面加上不同的 overflow 之後，就可以了解到差異囉！ 那個 hidden 最是有趣！可以將多出來的資料隱藏，也不會出現拉條～就是讓你看不見囉！

讀者應該常常會在一些研討會的網站上面看到很多圓形的大頭貼圖示，您應該不會想說，那個圓形圖是用圖形編輯軟體去編輯的吧？當然不需要啊！只要提供預設大頭照的照片，搭配 CSS 的方塊就可以達成這個目的了！

首先來想想，怎麼創造出一個圓形方塊呢？假設有個 300x300 像素的方塊，你要讓這個方塊變成圓形怎麼做？ 很簡單啊！給了方塊寬、高之後，讓四個角都呈現圓形即可～那半徑設定多少？當然就是 150 像素啊！剛好是 300x300 的中心點！ 非常簡單！

例題 5.4.B：使用圖檔，規劃出一個圓形大頭貼：

• 請呼叫 /www/web2/include/overall.css 這個網站整體設定風格檔
• 其他底下的所有設計項目，請使用 class 來處理，且放置於網頁最上方的 <style> 內
• 在檔案中寫入三行內容：

  <div class="bighead">
  <img src="images/圖片名稱.jpg" />
  </div>
  

• 建立一個名為 bighead 的方塊，這個方塊有底下的模樣：
  • 寬、高各為 300 像素
  • 給予 1px solid gray 的方框
  • 四個角為圓形，半徑為 150 像素
  • 超出方塊的部份請隱藏
  • 上面的動作，每做一個屬性的設定，就刷新一次頁面查閱結果！
• 在 bighead 裡面的 img 有底下的特性：
  • 寬度為 100%

檔名就設定為 /www/web2/unit05-4-2.html，完成的圖示會有點像底下這樣：

未來，只要將 .bighead 以及 .bighead img 的設定放入 overall.css 當中，那你就可以直接透過上面的方式來呼叫圓形大頭照了！當然， 後續你要加上什麼特效就自己決定囉！

承接上個例題，我們知道超出框線的部份可以透過 overflow 來進行是否要呈現在網頁上的處理。那如果你就是要將正常顯示的東西暫時隱藏呢？ 可以怎麼做呢？基本上，有兩種作法喔！

• display: {none|block|inline-block} ：還記得 display 吧！可以加上 none 來不顯示這個元素喔！
• visibility: {visible|hidden} ：正常顯示或者是隱藏起來。

display: none 與 visibility: hidden 都是隱藏，有什麼不同呢？這在本質上不太一樣喔！display: none 代表『這個元素不要出現在網頁上』的意思， 亦即該空間會變成不存在，因此後面出現的元件會使用到這個空間喔！那麼 visibility: hidden 呢？元素所在的空間會被保留下來，只是內容元素會被隱藏而已， 這兩個意義大不相同啊！

如果是使用在類似 fixed 或 absolute 這種與週邊的元素位置無關的屬性設定時，那麼這兩個設定差異就不會差太多～不過因為 visibility 未來可以搭配動畫特效， display: none 則單純方塊出現，無法設計某些特別的特效，因此建議還是使用 visibility 比較好。當然，如果是要整個父元素都不見， 那當然就是使用 display: none 較佳！

例題 5.4.C：使用 這個檔案 的內容，

• 請呼叫 /www/web2/include/overall.css 這個網站整體設定風格檔
• 其他底下的所有設計項目，請使用 class 來處理，且放置於網頁最上方的 <style> 內
• 將上述檔案的內容填入 unit05-4-3.html 後，先查閱一下預設的網頁編排情況為何。
• 增加一個名為 box1 的 CSS 類別，項目設定有：
  • 寬度給予 600 像素，高度為 100 像素，給予框線 1px solid gray 這樣的設定；
  • padding 的設定給予上下 10 像素，左右 20 像素
• 針對 p1 與 p2 的類別設定：
  • margin 邊界全部不要了，都設定為 0 喔
  • 預設情況下，內部元件是不顯示的效果 (先使用 visibility 來設定)
  • 但是，當滑鼠移動到 box1 方塊時，p1, p2 元件就會展示出來！

檔名就設定為 /www/web2/unit05-4-3.html，完成的圖示會有點像底下這樣：

你可以透過 :hover 滑鼠特效，搭配 visibility 先將答案隱藏後，就可以讓使用者在不同的畫面中查看答案了！ 其實上面的設計可能還沒有完整符合你的需求，讀者們可以發揮自己的創意，修改成各式各樣的展示喔！包括滑鼠指到 A, B, C 上面才顯示答案， 而不是移動滑鼠到下方的方塊上！

visibility 指的是整個元素是否需要隱藏，而 overflow 則指的是『超出父元素的資料部份』而已，兩者並不相同！因此， 例題 5.4.A 使用的是 overflow (因為還是有部份資料需要輸出)，而例題 5.4.C 則是使用 visibility，因為要先隱藏答案才好！

1. 利用底下的版型示意圖，搭配 這個圖檔 以及 這個文字檔 的內容，建置好一個名為 /www/web2/homeworks/ex05.5.1.html 的網頁。 在這個網頁中，那個文章來源永遠固定在上方方塊的右上角喔！而且跟其他元素的存在無關 (注意， position 的特性！)。 至於其他是否有任何特效，請自行參考使用！


2. 將算命的那一題做個變形，讓選項與答案綁在一起，就如同 這個文字檔 的內容一樣， 然後，預設的情況下，讓 page 這個方塊呈現寬、高為 700px 與 400px ，而 box1 則為 600px 與 100px 的大小， 要注意的是，我們希望 box1 『一定要出現在 page 這個方塊的最底下距離 10 像素的位置，且離左側有 50 像素。』， 然後，當滑鼠移動到選項上時，box1 內的 p 內容才會顯示出來。底下兩張圖示分別是滑鼠尚未移入與滑鼠移入選項後的結果。