DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> 用iframe解決下拉框與層之間的沖突
用iframe解決下拉框與層之間的沖突
編輯:關於HTML     

筆者用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>

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