HTML表单元素覆盖样式元素问题及其补救之道
日期：2004:2:13 ·来源：中国电脑教育报 作者：俞伟明 查看:[大字体 中字体 小字体]
在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题，图一就是一个典型的例子。不要小看这个貌似“低级”的问题，即使一些规模较大的网站上类似的问题也绝不鲜见。本文探讨了造成这一问题的根本原因，并提出一种补救办法——之所以说补救办法而不是一劳永逸的解决办法，是因为微软和NetScape这两个巨头也还没有对策。
一、HTML元素的显示优先级
HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框（SELECT），文本输入框（INPUT type=text），密码输入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），等等。常见的非表单元素包括：链接标记（A），DIV标记，SPAN标记，TABLE标记，等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则，例如：帧元素总是比其他HTML元素优先，因此也总是显示在最前面；表单元素总是比所有非表单元素优先。
所有这些HTML元素又可以根据其显示要求分成两类，即有窗口的HTML元素（Windowed Element），无窗口的HTML元素（Windowless Element）。有窗口的元素包括：SELECT元素，OBJECT元素，插件，IE 5.01以及更早版本中的IFRAME元素。无窗口的元素包括：大多数的普通HTML元素，如链接和TABLE标记，除了SELECT元素之外的大多数表单元素，NS6+/IE 5.5以及更高版本中的IFRAME元素。本文讨论的问题主要与有窗口的HTML元素有关，问题的症结其实就在于操作系统默认总是把有窗口的元素显示在无窗口的元素前面。
二、浏览器类型与显示优先级
按照浏览器类型比较，HTML元素的显示次序也有所不同，总结如下：
⑴ Netscape/Mozilla
在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。
⑵ Internet Explorer
在最新的IE浏览器（6.0）中，IFRAME元素和所有表单元素根据z-index属性值或它们在HTML页面中出现的次序来确定显示优先次序，但SELECT元素除外。
⑶ Opera
在最新的Opera（7.10*）浏览器中，包括SELECT在内的所有表单元素根据z-index属性或它们在HTML页面中的出现次序来确定显示优先级。但是，最新的Opera浏览器不将IFRAME作为无窗口元素显示，IFRAME被看做有窗口元素，在显示次序上要比所有无窗口元素优先。
三、CSS的z－index属性
我们知道，CSS的z-index属性可以用来控制任意HTML元素显示时的覆盖次序。当多个HTML元素重叠在同一空间中时，z-index值较大的元素将覆盖z-index值较小的元素。
但z-index属性值不是万能的。如前所述，有窗口的元素总是显示在无窗口元素的前面，z-index属性值只有在同一类元素之间才起决定作用。形象地说，有窗口元素和无窗口元素就像画在同一浏览器窗口的两块不同画布上，两类元素分别自成体系，它们的z-index属性也只相对于同一画布上的其他元素起作用。
四、补救之道
就目前的浏览器而言，一种比较有效的补救办法是：当无窗口元素需要覆盖有窗口元素时，运用脚本程序动态地隐藏有窗口元素。下面是一个完整的例子：
<html><head>
<style type="text/css">
.menuBlock{position:relative;top:14px;width:165px;border:2px solid black;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
padding-left:2px;padding-right:2px;border:2px solid black;
z-index:100;visibility:hidden;}
#lb_1{position:absolute;left:10px;top:40px; }
</style>
<script type="text/javascript">
var isActive = false;
function showMenu(){
isActive = true;
//document.getElementById("lb_1").style.visibility="hidden";
document.getElementById("subMenus").style.visibility="visible";
}
function hideMenu(){
isActive = false;
setTimeout('hide()',100);
}
function hide(){
if(!isActive){
document.getElementById("subMenus").style.visibility = "hidden";
document.getElementById("lb_1").style.visibility="visible";
}
}
function setStyle(menuItem){
isActive = true;
menuItem.style.backgroundColor = "Gray";
menuItem.style.color = "#FFFFFF"
}
function setDefault(menuItem){
isActive = false;
menuItem.style.backgroundColor = "";
menuItem.style.color = ""
hideMenu();
}
</script></head><body>
<div id="main" style="position:absolute;width:200px;">
<div id="menuBlock" class="menuBlock" onmouseover="showMenu();"
onmouseout="hideMenu();">CSS菜单</div>
<div id="subMenus" >
<div id="0" onmouseover="setStyle(this)"
onmouseout="setDefault(this)" >菜单项目一</div>
<!--共四个菜单项目 -->
</div><P>
<select id="lb_1" name="lb_1">
<option value="-1"/>选择列表
<!-- 三个选项 -->
</select>
</div>
</body></html>
页面的<STYLE>部分定义了三个样式，分别用于菜单条、菜单项目、选择列表，通过样式定义保证菜单、选择列表的显示区域重叠。<BODY>部分包含菜单和<SELECT>选择列表的定义。当鼠标经过菜单条时，JavaScript函数showMenu执行，显示出菜单，同时隐藏SELECT选择列表。鼠标离开后，hideMnu函数隐藏菜单，同时恢复选择列表。其余几个JavaScript函数主要用于模拟菜单动作，鼠标经过菜单项时以高亮度显示菜单（setStyle函数），鼠标离开菜单项目时则将它恢复默认显示形式（setDefault函数）。页面的运行效果如图二所示。将showMenu函数中的document.getElementById("lb_1").style.visibility="hidden"语句注释掉就可以看到图一的效果。
<descript>
<img src=/cce/img/553/04601t02.jpg>
</descript>
总之，表单元素覆盖样式元素的根源在于HTML元素默认的显示优先级规则。本文介绍的补救办法确实行之有效，不过如果你实在不想用这种办法，那就只好考虑改变页面布局，避免表单元素和样式元素的显示区域重叠。
分享到：
相关推荐
perl516-perl-Locale-Maketext-1.22-19.el6.centos.alt.noarch.rpm
MATLAB仿真平台下的含碳捕集与垃圾焚烧虚拟电厂的协同优化调度策略研究：电转气技术下的能源利用与需求响应管理,MATLAB代码：计及电转气协同的含碳捕集与垃圾焚烧电厂优化调度 关键词：碳捕集 电厂 需求响应 优化调度 电转气协同调度 参考文档：《计及电转气协同的含碳捕集与垃圾焚烧电厂优化调度》完全复现 仿真平台：MATLAB+CPLEX 主要内容：代码主要做的是一个计及电转气协同的含碳捕集与垃圾焚烧电厂优化调度问题，基本调度框架是碳捕集电厂–电转气–燃气机组协同利用框架，碳捕集的 CO2 可作为电转气原料， 生成的天然气则供应给燃气机组； 并通过联合调度将碳捕集能耗和烟气处理能耗进行负荷转移以平抑可再生能源波动，使得风电 光伏实现间接可调度而被灵活利用，代码采用的是非智能算法求解，因为本文问题复杂智能算法难以求解，故使用的是yalmip+cplex求解器完成求解 这段代码是一个关于电转气协同的含碳捕集与垃圾焚烧电厂优化调度的程序。下面我将对程序进行详细分析。 首先，程序开始时进行了一些初始化的操作，包括清空命令窗口、清除变量和关闭所有图形窗口。 然后，定义了一系列的参数，这
shp格式，可直接导入arcgis使用
1、文件内容：snappy-1.1.0-3.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/snappy-1.1.0-3.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
perl516-perl-libs-5.16.3-19.el6.centos.alt.x86_64.rpm
1、文件内容：si-units-0.6.5-1.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/si-units-0.6.5-1.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
1、文件内容：svrcore-devel-4.1.3-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/svrcore-devel-4.1.3-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
宠物管理系统(源码+数据库+论文+ppt)java开发ssm框架javaweb，可做计算机毕业设计或课程设计 【功能需求】 整个网上宠物管理系统的设计与实现，主要实现的功能有以下几点： （1）前台用户：首页、宠物用品、宠物商店、宠物领养、宠物挂失、论坛信息、宠物资讯、个人中心、后台管理、购物车、客服咨询 （2）管理员：首页、个人中心、宠物分类管理、商品分类管理、宠物用品管理、宠物商店管理、宠物领养管理、用户管理、宠物寄存管理、用户领养管理、宠物挂失管理、论坛管理、管理员管理、系统管理、订单管理等功能； 【环境需要】 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.数据库：MySql 5.7/8.0等版本均可； 【购买须知】 本源码项目经过严格的调试，项目已确保无误，可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件，讲解视频，部署视频教程，一应俱全，可以自己按照教程导入运行。附有论文参考，使学习者能够快速掌握系统设计和实现的核心技术。
## 功能特点 1. 数据导入 - 支持Excel文件 - 支持CSV文件 - 数据预览 - 自动识别列 2. 图表类型 - 折线图 - 柱状图 - 饼图 - 散点图 - 箱线图 - 热力图 3. 图表设置 - 自定义标题 - 主题选择 - 轴标签设置 - 样式调整 4. 其他功能 - 实时预览 - 高清导出 - 多种格式 - 简单操作
perl516-perl-DBI-1.630-4.el6.centos.alt.x86_64.rpm
1、文件内容：strace-4.24-7.el7_9.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/strace-4.24-7.el7_9.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
1、文件内容：sos-3.9-5.el7.centos.12.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/sos-3.9-5.el7.centos.12.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
1、文件内容：srp_daemon-22.4-6.el7_9.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/srp_daemon-22.4-6.el7_9.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
1、文件内容：supermin5-devel-5.1.19-1.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/supermin5-devel-5.1.19-1.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
找到image文件扫一扫获取授权
一个将 Ollama 与 Flask 框架结合的 Python 源码，创建一个 Web 服务，用户可以通过浏览器或其他工具向该服务发送请求，调用 Ollama 模型生成文本。
perl516-perl-DateTime-1.06-3.el6.centos.alt.x86_64.rpm
内容概要：本文档详细介绍了如何在不同操作系统（Windows、macOS 和 Linux）上安装 PyCharm这一集成开发环境（IDE）。文档不仅讲解了具体的下载渠道以及步骤指引——涵盖社区版和专业版的选择，而且还引导用户进行首次配置，包括外观定制、键盘布局选定以及必要的组件启用，并指出在首次使用的各个阶段可能会遇到的关键事项，像是授权激活。此外，也提到了在启动过程中，针对不同平台的一些特定注意事项，例如在 Mac 中的安全性和隐私设置、Linux 下基于命令行的解压缩与启动方法。 适合人群：初次接触 Python 编程或有意向使用 PyCharm 提高生产力的程序员，尤其是对 PyCharm 不太熟悉的技术新手。 使用场景及目标：为希望使用 PyCharm 开发 Python程序的学生或专业人士提供详尽的操作指南，使其能够顺利完成安装，并熟悉 IDE 的基本特性及高级特性的初步认识，从而快速着手实际项目的开发。 阅读建议：用户可以按自己的操作系统直接跳转相关章节，逐步依照文档步骤来进行安装与配置。同时关注每段文字末提到的独特提醒项以保证顺利地使用 IDE 进行编码工作。对于计划长期使用 PyCharm 的用户来说，还可以探索更多高级插件以满足自身开发需求。
perl516-perl-DateTime-TimeZone-1.63-5.el6.centos.alt.noarch.rpm
全新前端UI界面，多种前端交互特效让页面不再单调，进群页面群成员数，群成员头像名称，每次刷新页面随机更新不重复，最下面评论和点赞也是如此随机刷新不重复 进群页面简介，群聊名称，群内展示，常见问题后台一键开关方便控制，付费进群系统后台自定义你的内容，底部显示你所设置的进群金额，也可以修改付费获取某些资源，搭建者自己集思广益，搭建的知识工具里面的内容才是内核，运营起来才是王道