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元素除外。

　　总之，表单元素覆盖样式元素的根源在于HTML元素默认的显示优先级规则。本文介绍的补救办法确实行之有效，不过如果你实在不想用这种办法，那就只好考虑改变页面布局，避免表单元素和样式元素的显示区域重叠。