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元素默认的显示优先级规则。本文介绍的补救办法确实行之有效,不过如果你实在不想用这种办法,那就只好考虑改变页面布局,避免表单元素和样式元素的显示区域重叠。
分享到:
相关推荐
Java SE8 人机猜拳小游戏.zip
2024免费毕业设计成品,包括源码+数据库+往届论文资料,附带启动教程和安装包。 启动教程:https://www.bilibili.com/video/BV1jKDjYrEz1 技术栈:Vue.js+SpringBoot+MySQL。 开发工具:Idea+VSCode。
(springboot+mysql)大学生心理服务系统 包含数据库mysql+前端页面vue 毕业论文以及开题报告+答辩PPT
用于解决在 Windows 11 系统下使用华为 secoClient 客户端时遇到的连接问题。具体表现为 secoClient 链接失败,SVN Adapter V1.0 签名认证警告,并提示“提示用户与对方建立连接超时,配置错误或网络故障”。
本项目是自己做的设计,有GUI界面,完美运行,适合小白及有能力的同学进阶学习,大家可以下载使用,整体有非常高的借鉴价值,大家一起交流学习。该资源主要针对计算机、通信、人工智能、自动化等相关专业的学生、老师或从业者下载使用,亦可作为期末课程设计、课程大作业、毕业设计等。 项目整体具有较高的学习借鉴价值!基础能力强的可以在此基础上修改调整,以实现不同的功能。
目标平台:Windows操作系统 开发工具:Microsoft Visual Studio,使用Windows Forms(WinForm)技术进行界面设计和应用程序开发。 主要功能:扫码、聊天、通讯录、朋友圈等微信核心功能的实现。 功能特点 1.聊天:支持一对一聊天,用户可以快速发送文本消息、图片、视频等。 2. 朋友圈:用户可以浏览和发布动态,分享生活点滴。 3. 扫码:支持调用微信官方API实现扫码登录,获取用户信息。
"基于Matlab的全方位数字图像处理系统:美观GUI界面与多样化功能集成","基于Matlab的全面功能数字图像处理系统:拥有丰富功能与美观GUI界面的自动运行图像处理程序",基于 Matlab 的数字图像处理系统。 包含GUI界面。 界面非常美观。 功能包括:亮度对比度色彩调整、几何变,图像反色,中值滤波,维纳滤波,傅氏变,灰度图,二值图,柱状图,腐蚀,膨胀,均衡化等。 程序可以自动运行,可以替成你自己的图片。 图像处理的程序有很多,设计成这么美观的很少。 ,基于Matlab的数字图像处理系统; GUI界面; 美观设计; 亮度对比度色彩调整; 几何变换; 图像反色; 滤波处理(中值、维纳); 频域变换(傅氏变换); 图像转换(灰度、二值、柱状图); 形态学处理(腐蚀、膨胀); 图像均衡化; 可自动运行; 图像可替换。,"Matlab图像处理系统:多功能GUI界面,自动调整与高级算法融合"
西门子龙门机床主从轴同步控制技术:全仿真无硬件支持的新突破,西门子龙门机床主从轴同步控制技术:全仿真无硬件支持的新突破,西门子龙门主从轴同步,可无硬件全仿真。 ,西门子;龙门主从轴同步;可无硬件;全仿真,西门子龙门轴同步技术全仿真解决方案
JAVAEE框架学习-2025.zip
"基于Matlab的心电信号ECG去噪系统:低通滤波与小波分解结合的时频域波形显示与基线漂移、肌电干扰、工频干扰的消除操作界面与视频指南","基于Matlab的心电信号ECG去噪系统:低通滤波与小波分解的联合应用,实时显示时域频域波形,有效去除基线漂移、肌电干扰及工频干扰,并附带操作界面与使用教程视频",心电信号ECG去噪,Matlab使用低通滤波和小波分解结合。 显示时域和频域波形 能去基线漂移、去肌电干扰、去工频干扰 带操作界面 有使用操作视频 ,心电信号去噪;Matlab低通滤波;小波分解;时域频域波形;基线漂移去除;肌电干扰去除;工频干扰去除;操作界面;使用操作视频,"ECG信号去噪:Matlab低通滤波与小波分解结合,展示时频域波形"
项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql5.7以上 部署环境:maven 数据库工具:navicat
课程网站,用于教育资源访问,可以学习指定课程
基于Comsol模拟的多道激光熔覆热流耦合模型及其流体传热层流动网格教学教程解析,"Comsol模拟技术:多道激光熔覆热流耦合模型教学及流体传热层流动网格应用教程",Comsol模拟多道激光熔覆热流耦合模型和教学教程,用到的物理场为流体传热层流以及动网格 ,核心关键词:Comsol模拟;多道激光熔覆;热流耦合模型;流体传热;层流;动网格;教学教程。,COMSOL模拟激光熔覆热流耦合模型与教学教程:流体传热层流动网格应用
内容概要:随着高清(HD)和超高清(UHD)视频内容在网络流量中占比增加以及用户对高质量体验的要求提升,视频质量评估成为关键技术挑战。本文探讨了一种新型视频质量评估方法——退化类别评分(DCR),并对其进行了主观实验研究。研究人员采用JND专家测试选定视频源,利用DCR收集更敏感的质量评分,改进了客观质量指标在高质量范围内的表现,并验证了多种常用视频质量度量的有效性。研究表明,在高质量视频中,传统度量如PSNR、SSIM及VMAF性能下降明显,特别是在UHD范围内。 适合人群:从事视频编码和传输、多媒体系统优化的专业人士、学术界研究人员。 使用场景及目标:该研究成果可以为提高视频压缩效率、监控传输视频质量以及优化用户体验等方面提供理论依据和技术支持。特别是针对如何选择有效的客观度量来适应不断变化的内容特性和用户期望。 阅读建议:重点关注论文提出的方法论和试验结果部分。注意不同评估协议对于主观打分的影响,了解新型VQA算法相对于传统模型的优势所在,并关注作者关于进一步改善高分辨率内容预测精度的看法。
【毕业设计】JSP基于SSM旅游景点预订html5网站毕业源码案例设计_pgj
项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql5.7以上 部署环境:maven 数据库工具:navicat
《Visual C++实践与提高——COM和COM+篇》这本书最适合新手的,除了理论还有大量的示例能够帮助新手快速入门,并且该书第二章带领新手从c++一步步走向COM,引人入胜。因此特上传该书源码供大家学习。
目录: 00-开篇词 (1讲) 00-开篇词 (1讲) 02-开发篇 (15讲) 03-实践篇 (7讲) 04-结束语 (1讲) 05-测试题 (1讲) 06-用户故事 (1讲)
太戈编程(补充)C++网络流24题课时 谢皓晨主编
格子玻尔兹曼方法LBM在IBM模拟多孔介质流固耦合传热中的实践:涉及球体与壁面碰撞的C++代码实现,格子玻尔兹曼方法LBM-IBM在多孔介质流固耦合传热模拟中的应用:球碰撞与壁面碰撞的C++代码实现,格子玻尔兹曼方法 LBM- IBM 模拟多孔介质下坠及传热(流固耦合)包含球碰撞及和壁面碰撞 C++代码 ,核心关键词如下: 格子玻尔兹曼方法(LBM); IBM模拟; 多孔介质; 球碰撞及壁面碰撞; 流固耦合; 传热; C++代码。,LBM-IBM模拟多孔介质流固耦合传热及球壁碰撞C++代码