HTML表单元素覆盖样式元素问题及其补救之道
在设计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元素默认的显示优先级规则。本文介绍的补救办法确实行之有效，不过如果你实在不想用这种办法，那就只好考虑改变页面布局，避免表单元素和样式元素的显示区域重叠。
相关推荐
-
HTML表单元素覆盖样式元素问题及其补救之道
在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子.不要小看这个貌似"低级"的问题,即使一些规模较大的网站上类似的问题也绝不鲜见.本文探讨了造成这一问题的根本原因,并提出一种补救办法--之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策. 一.HTML元素的显示优先级 HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入
-
js控制表单奇偶行样式的简单方法
一.如果使用JQuery的话可以直接JQuery的 复制代码 代码如下: $("tr:odd").addClass("clazzName"); $("tr:even").addClass("clazzName"); 二.如果是使用纯js的话 1.先获取table标签,var table = document.getElementById() 2.再获取里面的tbody标签var tbody = table.getElement
-
AngularJS使用指令增强标准表单元素功能
Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括: 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性 下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</ti
-
Bootstrap基本样式学习笔记之表单(3)
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 0x01 样式1 一个登录界面: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
-
jquery validate表单验证插件
对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百
-
功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点
-
jQuery Validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数:
-
jQuery Validate表单验证插件实现代码
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校
-
javascript表单控件实例讲解
本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下 实例一:遍历表单的所有控件 <script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<e
-
全面解析Bootstrap表单使用方法（表单控件）
一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con