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元素默认的显示优先级规则。本文介绍的补救办法确实行之有效，不过如果你实在不想用这种办法，那就只好考虑改变页面布局，避免表单元素和样式元素的显示区域重叠。
分享到：
相关推荐
HTML通过各种标签来定义这些元素，例如`<h1>`到`<h6>`用于定义标题级别，`<p>`用于段落，`<a>`用于超链接，`<img>`用于插入图像，等等。 HTML5是目前最新的版本，引入了更多增强功能，比如离线存储（localStorage）...
JavaScript可以通过DOM（Document Object Model）操作HTML元素，实现动态效果和用户交互。 这份HTML编码规范PDF包含了这些核心知识点，并配以源码示例，将帮助新手快速理解和掌握HTML的基本用法。通过深入学习并...
本文将深入探讨jQuery如何添加样式属性，并分析它们的优先级别。 首先，jQuery 提供了一个 `.css()` 方法来动态地为元素添加样式属性。通过这个方法，我们可以直接在 JavaScript 中设置 CSS 属性，例如颜色、边框、...
在`<body>`中，你可以使用`<h1>`到`<h6>`来创建不同级别的标题，`<p>`来定义段落，`<a>`来创建链接，`<img>`来插入图像，`<ul>`和`<ol>`及`<li>`分别用于无序列表和有序列表，`<div>`作为布局容器等。 HTML5是当前...
1. 结构元素：HTML5引入了如、、、、、等新的结构元素，使网页的语义化更清晰，有助于搜索引擎优化和无障碍访问。 2. 表单控件：新增了、、等表单输入类型，提高了用户界面的友好性，也增强了数据验证功能。 3. ...
通过使用CSS，我们可以实现颜色、字体、布局、动画等效果，使HTML元素更加美观。了解CSS选择器、盒模型、布局模式（如流式布局、网格布局、Flexbox和Grid）是提升网页设计能力的重要一步。 4. JavaScript与交互性：...
1. **HTML元素**：HTML由一系列的元素组成，每个元素都有其特定的意义，如`<p>`用于创建段落，`<h1>`至`<h6>`定义不同级别的标题，`<a>`用于创建超链接等。 2. **HTML属性**：元素可以有属性来进一步定制行为，例如`...
2. **参数传递**：`onclick`可以传递`this`作为参数，允许在函数内部访问触发事件的元素，而`href="javascript:xxx()"`方式无法传递`this`。例如： ```html (0)" onclick="showElement(this)">点击显示元素 ``` 3....
例如，`document.getElementById()`用于获取HTML元素，`addEventListener()`监听事件，`setTimeout()`或`setInterval()`实现定时任务，`fetch()`或`XMLHttpRequest`进行数据的异步加载。JavaScript还可以与HTML和CSS...
然而，应尽可能避免过度依赖`div`，优先选择具有语义化的元素。 3. **预格式化内容（Preformatted Text）** 使用`<pre>`元素可以保留文本的原始格式，不会被浏览器压缩空格和回车。这在展示代码示例时特别有用，...
在这些模板中，你可能还会发现一些常见的CSS库和框架，如Bootstrap或Foundation，它们提供了一套完整的组件和样式，能快速搭建出专业级别的网站。此外，模板可能还应用了一些前端最佳实践，如移动优先的设计哲学、...
- **根元素`<html>`**：包含所有其他HTML元素。 - **头部元素`<head>`**：包含文档的元数据，如标题、字符集、样式表链接等。 - **主体元素`<body>`**：包含实际显示在页面上的内容。 #### 3. 基本标签介绍 - **...
1. **选择器**：选择器是CSS的基石，用来选取要应用样式的HTML元素。包括类选择器（.class）、ID选择器（#id）、标签选择器（element）以及组合选择器等。 2. **属性与值**：CSS由一系列规则组成，每个规则包含一个...
在“使用HTML语言开发商业站点(html)3”这个主题中，我们将深入探讨如何利用HTML5来创建具有专业级别的商业网站。 一、HTML5新特性与优势 HTML5是HTML的最新版本，它引入了许多新特性，旨在提升网页的交互性和可用...
2. JavaScript通过DOM（文档对象模型）操作HTML元素，实现动态效果和用户交互。 总之，HTML是构建网页的基础，通过学习和实践，你可以创造出功能丰富、美观的网页。无论你是初学者还是有经验的开发者，这个HTML教程...
1. **Canvas API**：HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript可以进行像素级别的操作，实现动画和游戏画面的绘制。在吃豆人游戏中，我们需要用Canvas来画出游戏地图、角色、食物等元素，并实时更新...
### JavaScript基础知识点总结—入门级别 #### 一、JavaScript简介 JavaScript是一种主要应用于网页开发的脚本语言，它能够在客户端运行。通过JavaScript可以为网页添加动态效果，改善用户体验，例如实现网页元素...
HTML5广告制作插件是现代数字营销领域中的一个重要工具，它结合了前端技术如HTML、CSS、JavaScript...在当前移动优先、多屏幕浏览的环境下，HTML5广告制作插件对于想要抓住用户注意力的广告商来说，是不可或缺的工具。