DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 解決圖層的精確定位問題
解決圖層的精確定位問題
編輯:Dreamweaver相關     
  在網頁制作中使用圖層,我們常會遇到這樣的問題:圖片分辨率一旦變化、窗口最大化之後,圖層就錯位了。而使用菜單插入層的時候,這個層就會與它的上級元素相對定位,一旦移動它,它就會馬上變成絕對定位。這個問題雖小,但在實際應用過程中還是會給網頁設計者帶來一些麻煩。

  其實,造成圖層錯位的核心是父層與子層的問題。只要使父層相對於某點定位,而子層相對於父層定位,就可以達到層的相對定位這個目標了。操作方法如下:

  先在頁面內插入表格(可以設居中),鼠標在某單元格內點一下,然後通過菜單插入一個層,這個層就相對於這個單元格定位了。插入一個層之後,不要動它,而且永遠也不要動,但是可以更改它的大小,比如把它的高與寬都改成“0”,讓它不再影響你對其他內容的編輯,否則,這個層的“Left”與“Top”屬性出現之後就成了絕對定位了。如果變成絕對定位,你可以把它的“Left”與“Top”屬性去掉,就恢復成相對定位了。變成“0”之後,有時子層會看不見,可以按“F11”鍵點它恢復編輯。現在光標應該在這個層內閃動,再通過菜單插入子層,這時子層與父層重疊,你可以隨意移動它。

  不管怎麼動,它都是相對於父層定位的。至此問題也就解決了。不過要注意不要動“Left”與“Top”屬性,因為它是相對於父層的左上角定位的。

  技巧:先插入一個表格,在其中一個單元格中插入父層,可以把它定得小一點,比如說20像素寬、10像素高,這樣它就不會蓋住下面的鏈接,也不影響子層的相對定位。如果要用778像素寬定義表格,可以把父層插入到表格的第一行第一個單元格中,這樣就可以在所有層制作完後插入父層了!

  盡管通過子層可以實現圖層的精確定位,但還是建議不要用圖層來排版。圖層用來做特效才是強項!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved