HTML表单元素覆盖样式元素的问题及其补救

在设计HTML页面的过程中，我们经常会遇到表单元素覆盖样式元素带来的问题。图1是一个典型的例子。不要低估这个看似“低级”的问题，即使在一些大型网站上，类似的问题也并不少见。本文探讨了这一问题的根源，并提出了补救措施。——之所以说补救而不是一劳永逸，是因为微软和网景没有对策。

一、HTML元素的显示优先级HTML中常用的表单元素包括：TEXTAREA、列表框、文本输入框(INPUT type=text)、密码输入框(INPUT type=password)、单选输入框(INPUT type=radio)、勾选输入框(INPUT type=checkbox)等。的常见非表单元素包括：链接标签(a)、DIV标签、SPAN标签、TABLE标签等。表单元素覆盖样式元素的根本原因在于HTML元素的默认显示优先级规则。例如，框架元素总是优先于其他HTML元素，所以它们总是显示在前面；表单元素总是优先于所有非表单元素。所有这些HTML元素根据其显示要求可以分为两类，即有窗口的HTML元素和无窗口的HTML元素。带窗口的元素包括：SELECT元素、OBJECT元素、插件、IE 5.01及更早版本中的IFRAME元素。无窗口元素包括：最常见的HTML元素，如链接和TABLE标签，除SELECT元素外的大多数表单元素，NS6 /IE 5.5及更高版本中的IFRAME元素。本文讨论的问题主要与带有窗口的HTML元素有关。问题的关键在于，默认情况下，操作系统总是在无窗口元素前面显示有窗口的元素。二、浏览器类型和显示优先级根据浏览器类型的不同，HTML元素的显示顺序也不同，可以总结如下：(1)在ns浏览器6.0之前的Netscape/Mozilla版本中，表单元素的优先级始终高于其他HTML元素。但是，在NS 6浏览器中，IFRAME元素和所有表单元素的显示顺序是由CSS的z-index属性值或它们在HTML页面中的显示顺序决定的，SELECT元素除外。 Internet Explorer在最新的IE浏览器(6.0)中，除了SELECT元素外，IFRAME元素和所有表单元素的显示优先级都是根据z-index属性的值或它们在HTML页面中出现的顺序来确定的。 Opera在最新的Opera(7.10*)浏览器中，包括SELECT在内的所有表单元素都会根据z-index属性或它们在HTML页面中出现的顺序来确定显示优先级。但是最新的Opera浏览器没有将IFRAME显示为无窗口元素，IFRAME被视为无窗口元素，在显示顺序上优先于所有无窗口元素。我们知道，CSS的z-index属性可以用来控制任何HTML元素在显示时的叠加顺序。当多个HTML元素在同一个空间中重叠时，z索引值较高的元素将覆盖z索引值较低的元素。但是z-index属性值并不是万能的。如前所述，窗口元素始终显示在无窗口元素的前面，z-index属性的值只在同类元素中起决定性作用。形象地说，窗口元素和无窗口元素被绘制在同一个浏览器窗口的两个不同画布上。这两种类型的元素是独立的，它们的z-index属性只相对于同一画布上的其他元素起作用。4.补救措施就目前的浏览器而言，一个有效的补救措施是当没有窗口元素需要被窗口元素覆盖时，使用脚本程序动态隐藏窗口元素。

下面是一个完整的例子：htmlhead样式类型='text/css ' .menuBlock {位置：相对；top:14px宽度宽度：165pxborder:2px纯黑；} #子菜单{ position : relative eleft :15 xtop :15 px宽度宽度：171px填充-左侧：2 px填充-右侧：2 pxborder:2px纯黑；z指数：100;可见性：隐藏；} # lb _ 1 { position : absolute eleft :10 ptop :40 px }/style script type=' text/JAVAScript ' var is active=false；函数show menu(){ IsActive=true；//文档。getelementbyid(' lb _ 1 ')。风格。可见性='隐藏'；document.getElementById("子菜单").style.visibility="可见";}函数hideMenu(){ IsActive=false；setTimeout('hide()'，100)；}函数hide(){if(！isaactive){ document。GetElementByID('订阅')。风格。可见性='隐藏'；文件。getelementbyid(' lb _ 1 ')。风格。可见性='可见'；} }函数setStyle(MenuItem){ IsActive=true；menuitem。风格。背景颜色='灰色'；menuItem。风格。color=' # FFFFFF ' }函数设置默认值(MenuItem){ is active=false；menuitem。风格。background COlOr=MenuItem。风格。color=' ' HideMenu()；}/script/head dydiv id=' main ' style=' position : absolute；宽度width :200 pxdiv id=' MenuBlock ' class=' MenuBlock ' on mouse over=' show menu()；onmouseout=' HideMenu()；半铸钢钢性铸铁(铸造半钢)菜单/div div id=' SUbbles ' div id=' 0 ' on mouse over=' SetStyle(this)' on mouse out=' SetDefault(this)'菜单项目一/div！-共四个菜单项目-/PSE区选择id='lb_1 '名称='lb_1 '选项值='-1'/选择列表！-三个选项- /select/div/body/html页面的风格部分定义了三个样式，分别用于菜单条、菜单项目、选择列表，通过样式定义保证菜单、选择列表的显示区域重叠BODY。部分包含菜单和挑选选择列表的定义。当鼠标经过菜单条时，JavaScript函数显示菜单执行，显示出菜单，同时隐藏挑选选择列表。鼠标离开后，hideMnu函数隐藏菜单，同时恢复选择列表。其余几个Java脚本语言函数主要用于模拟菜单动作，鼠标经过菜单项时以高亮度显示菜单(setStyle函数),鼠标离开菜单项目时则将它恢复默认显示形式（设置默认值函数)。页面的运行效果如图二所示。将显示菜单函数中的文件。getelementbyid(' lb _ 1 ')。风格。可见性='隐藏'语句注释掉就可以看到图一的效果src=/CCE/img/553/04601t 02。jpg/descript

总之，表单元素覆盖样式元素的根源在于HTML元素默认的显示优先级规则。本文介绍的补救措施确实有效，但是如果您真的不想使用这种方法，则必须考虑更改页面布局，以避免表单元素和样式元素的显示区域重叠。