您当前的位置: 首页 > 前端教程 > HTML教程 > 用层遮盖select下拉菜单的实现方法

用层遮盖select下拉菜单的实现方法

作者:不详 来源:网络 发布时间: 2011-03-05 11:08 点击:
z-index是CSS中决定网页中容器元素垂直显示顺序的属性,比如两个div,z-index值大的将遮盖小的div.而select控件由于其浏览器开发实现方法和其他标签不同,用常规方法div无法遮盖,所以得借助其他的方法. 建立一个iframe,z-index属性是5,将其隐藏,位置于需要遮盖的

用层遮盖select下拉菜单的实现方法

  z-index是CSS中决定网页中容器元素垂直显示顺序的属性,比如两个div,z-index值大的将遮盖小的div.而select控件由于其浏览器开发实现方法和其他标签不同,用常规方法div无法遮盖,所以得借助其他的方法.
  
  建立一个iframe,z-index属性是5,将其隐藏,位置于需要遮盖的select相同,比select大一点,刚好遮住select
  select的z-index属性是4
  div的是z-index属性是6
  总之,z-index属性,select的要比IFrame的小,div的要比IFrame的大,这样层就可以遮住select.
  
  divselect.HTML代码:
  
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <HTML>
  <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  </HEAD>
  
  <BODY>
  <DIV id=div1 name=div1 style="width:400;height:400;background-color:lightblue;
  position:absolute;left:350;top:250;z-index:6">DIV</DIV>
  <select id=select1 name=select1 style="position:absolute;left:400;top:400;width=300;z-index:4"
  size=1 >
   <option>Option1
   <option>Option2
   <option>Option3
  </select>
  <IFRAME id=iframe1 name=iframe1 src=http://www.webyi.com/wschool/wdesign/html/20090226/"" scroll="none" style="dispaly:none;width:200;height:415;position:absolute;
  left:400;top:300;z-index:5;filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'"></iframe>
  </BODY>
  </HTML>

分享到:
本文"用层遮盖select下拉菜单的实现方法"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4