在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题，使一些规模较大的网站上类似的问题也绝不鲜见。下面学步园小编来讲解下HTML表单元素覆盖样式元素有哪些问题?HTML表单元素覆盖样式问题怎么补救？
HTML表单元素覆盖样式元素有哪些问题
一、HTML元素的显示优先级
HTML中常用的表单元素包括：文本区域(TEXTAREA)，列表框(SELECT)，文本输入框(INPUTtype=text)，密码输入框(INPUTtype=password)，单选输入框(INPUTtype=radio)，复选输入框(INPUTtype=checkbox)，等等。常见的非表单元素包括：链接标记(A)，DIV标记，SPAN标记，TABLE标记，等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则，例如：帧元素总是比其他HTML元素优先，因此也总是显示在最前面;表单元素总是比所有非表单元素优先。
所有这些HTML元素又可以根据其显示要求分成两类，即有窗口的HTML元素(WindowedElement)，无窗口的HTML元素(WindowlessElement)。有窗口的元素包括：SELECT元素，OBJECT元素，插件，IE5.01以及更早版本中的IFRAME元素。无窗口的元素包括：大多数的普通HTML元素，如链接和TABLE标记，除了SELECT元素之外的大多数表单元素，NS6+/IE5.5以及更高版本中的IFRAME元素。本文讨论的问题主要与有窗口的HTML元素有关，问题的症结其实就在于操作系统默认总是把有窗口的元素显示在无窗口的元素前面。
二、浏览器类型与显示优先级
按照浏览器类型比较，HTML元素的显示次序也有所不同，总结如下：
⑴Netscape/Mozilla
在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。
⑵InternetExplorer
在最新的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表单元素覆盖样式元素有哪些问题?HTML表单元素覆盖样式问题怎么补救
就目前的浏览器而言，一种比较有效的补救办法是：当无窗口元素需要覆盖有窗口元素时，运用脚本程序动态地隐藏有窗口元素。
总之，表单元素覆盖样式元素的根源在于HTML元素默认的显示优先级规则。本文介绍的补救办法确实行之有效，不过如果你实在不想用这种办法，那就只好考虑改变页面布局，避免表单元素和样式元素的显示区域重叠。
以上就是关于“HTML表单元素覆盖样式元素有哪些问题?HTML表单元素覆盖样式问题怎么补救”的内容，希望对大家有用。更多资讯请关注学步园。学步园，您学习IT技术的优质平台!