HTML层与下拉列表框冲突的解决方法

HTML层与下拉列表框冲突的解决方法

By 空空 on July 16, 2004 12:34 PM | Permalink | Comments (0)

在公司里做提示语(HINT)模块的时候，遇到了一个问题：在网页最上面加入一个层，但是显示的时候会被后面的下拉列表框挡住，见下图：

其实出现这个问题的主要原因是因为层与下拉框之间的优先级是：下拉框 > 层，所以在显示的时候，会因为优先级的次序而会出现上面的问题。

解决办法：在层中放置优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码:

<div id=msgbox style=position:absolute;left:0px;top:0px;width:100%;height:80%;visibility:visible;><table width=350 align=center height=100%><tr valign=middle><td><iframe src="javascript:false" style="position:relative; visibility:inherit; top:60px; width:350px; height:60px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe><table width=100% height=120 border=1 cellpadding=0 cellspacing=0 bordercolor=#333333 bgcolor=#ececec style=font-size:12px;><tr height=26><td colspan=2 bordercolor=#e4f2fe bgcolor=#337cbd style=color:white;padding-left:8px;letter-spacing:2px;>提示</td></tr><tr bgcolor=#e4f2fe><td width=25% align=center bordercolor=#e4f2fe><img src=images/hints_information.gif></td><td bordercolor=#e4f2fe>请填写完整信息！<br><br><a style=cursor:hand οnclick="document.getElementById('msgbox').style.visibility='hidden'"><img src=images/hints_close.gif></a></td></tr></table><iframe src="javascript:false" style="position:relative; visibility:inherit; top:-60px; width:350px; height:60px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe></td></tr></table>

我采用了两个iframe来解决这个问题，table上下各一个，上面的那个iframe，它的top值设为表格高度一半，下面的iframe的top设置为负的表格高度的一半，两个合在一起正好把表格遮住。当然你也只用一个iframe来进遮，效果也是可以的。只是表格的位置会有点偏上，这样做可以使表格正好在中间。

 

解决后的样子：