頁面菜單詳細說明(4):定位問題

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。    通過前三篇文章的講解，現在我們已經可以實現一個基本的菜單了。這一章，我們來討論一下定位的問題。

　　在前幾章講的例子中，定位都是相對于整個網頁的左上角。在有一些時候，我們可能需要它相對于網頁中某個元素定位，這樣做在某些時候是非常有必要的，比如不會出現那種因窗口大小的改變而致使菜單與網頁中的一些元素的相對位置發生變化。在第一章的最初，筆者所給的例子中就是這樣做的。

　　在那里我們很方便把就把這個菜單插入到了網頁中，而菜單不會相對菜單按鈕的位置發生變化。下面我們就看看如何來實現。

　　在第一章，我們講過position，當它取值absolute的時候，即絕對定位。既然是定位，就要有參照物。一般來講，這個定位的參照物是body（即整個網頁）的左上角，但如果其父級元素中有設置了position:absolute的元素，那么它的參照物就是該元素。知道了這樣一個特性，我們就可以很容易的來實現了。

　　另外，有一點在這里必須要著重說明一下，前面同時也講過，當position的值為relative時，就是相對定位，為什么不用它來實現呢？我們必須要正確理解這里所謂的相對定位：它是指相對于原來在HTML中的位置所發生的偏移，而它仍占據原來在HTML中所占據的位置。而我們現在的菜單需要“懸浮”在網頁元素之上，而這只有當position設為absolute時才可以做到。

　　通過上面的講述，我們應該可以大致的了解其實現的原理了。下面就看看剛才在上面看到的那個菜單的代碼（注意里面的注釋會幫你加深理解）。

-------------------------------------------------------------------------------