DIV CSS 佈局教程網

筆者用dw做了一個下拉菜單，但是碰到form的列表項就跑到下面去了，請幫忙解決，請看問題圖1示。

圖1 網頁中下拉框與層之沖突

由於層與下拉框之間的優先級是：下拉框 > 層，因此在顯示的時候，會因為優先級的次序而會出現如上問題。（如果幾個元素都是層的話，我們可以通過層的 z-index 屬性來設置）解決辦法就是：給層中放一個優先級比下拉框更高的元素（iframe），從而解決此問題！具體解決代碼如下：

<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
< table>
< tr><td>item 1</td></tr>
< tr><td>item 2</td></tr>
< tr><td>item 3</td></tr>
< tr><td>item 4</td></tr>
< tr><td>item 5</td></tr>
< /table>
< iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
< /div>
< a href="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a>
< form>
< select><option>A form selection list</option></select>
< /form>