当前位置：首页 -> 网页设计 -> HTML/CSS -> HTML表单元素覆盖样式元素问题及其补救之道

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

时间： 2021-07-31 作者：daque

在安排html页面包车型的士进程中常常会遇到表单位素掩盖款式元素惹起的题目，图一即是一个典范的例子。不要忽视这个好像“初级”的题目，纵然少许范围较大的网站上一致的题目也绝不鲜见。正文商量了形成这一题目的基础因为，并提出一种弥补方法——之以是说弥补方法而不是一了百了的处置方法，是由于微软和netscape这两个权威也还没有对策。

html表单元素覆盖样式元素问题及其补救之道图1

一、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=http://www.okasp.com/cce/img/553/04601t02.jpg></descript>

html表单元素覆盖样式元素问题及其补救之道图2

总之，表单位素掩盖款式元素的基础在乎html元素默许的表露优先级准则。正文引见的弥补方法真实卓有成效，然而即使你简直不想用这种方法，那就只好商量变换页面构造，制止表单位素和款式元素的表露地区臃肿。（根源：华夏电脑培养报）

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

相关推荐

推荐下载

热门阅览

最新排行