`
yaasshole
  • 浏览: 658960 次
文章分类
社区版块
存档分类
最新评论

HTML元素的Z-index属性是如何工作的

 
阅读更多
摘要
在一个Web页面上有很多种方法去把元素分类. 基于本文的目的和z-index属性, 我们可以把他们分为两类: 窗口类和非窗口类.

窗口类元素
• <OBJECT> 标志元素
• ActiveX 控件
• Plug-ins
• 动态 HTML (DHTML) Scriptlets
• SELECT 元素
• Internet Explorer 5.01 以及早期版本中的IFRAMEs

注意 ActiveX 控件是按照窗口类来实现的, 但实际上还有一部分是非窗口类的. 默认的, Microsoft Visual Basic 和Microsoft Foundation Class (MFC) 控件是窗口类的, 但是Active Template Library (ATL) 空间是非窗口类的.

非窗口类元素
• 非窗口的ActiveX控件
• Internet Explorer 5.5和以后版本的IFRAMEs
• 大多数DHTML元素, 比如hyperlinks和 tables

更多信息
所有的窗口类元素在呈现时都会覆盖在非窗口类元素上面, 而不管他们的容器是什么样的. 然而在窗口类元素之间也是象非窗口类元素一样都是按照z-index属性来排列的.

所有的非窗口类元素都是呈现在相同的MSHTML平面上, 而窗口类元素是呈现在单独的MSHTML平面上. 你可以利用z-index在同一个平面内随意操作元素, 但是不要把不通平面的元素混为一谈. 你可以分别重新排列不同平面上元素的z-index, 但是窗口类的平面是总在非窗口类平面之上的.

在Internet Explorer 5中Z-index是怎么工作的
Internet Explorer 5中, IFRAMEs是窗口类控件, 并且他按照z-index属性的顺序和其他窗口类控件排列在一起, 比如SELECT元素. 如果IFRAME的z-index值比SELECT元素的大, 那么IFRAME将会呈现在SELECT元素之上, 反之亦然. 如果z-index值相同, 那就要看元素在页面上的位置; 也就是说, 最后放上去的元素将会在前面的元素之上.

下面的代码说明这一点:

<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>
function setindex()
{
div1.style.zIndex=text1.value;
select1.style.zIndex=text2.value;
getindexes();
}

function getindexes(){
text1.value=div1.style.zIndex;
text2.value=select1.style.zIndex;
text3.value=5;
}
</script>
</HEAD>
<BODY onload=”getindexes()”>

Div
<input type=”text” value=”" id=text1 name=text1 ><p>

Select
<input type=”text” value=”" id=text2 name=text2><p>

IFrame
<input type=”text” value=”" id=text3 name=text3><p>
<input type=”button” value=”Set Z-Index” id=button1 name=button1 onclick=”setindex()”>
<DIV id=div1 name=div1 style=”width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:”>DIV</DIV>
<select id=select1 name=select1 style=”;position:absolute;left:300;top:400;width=300;z-index:”
size=1 >
<option>Option1
<option>Option2
<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src=”" scroll=none style=”width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5″></iframe>
</BODY>
</HTML>
IFRAME 的z-index被设置成一个不变的值5. 当你输入一个比任何元素都大的值的时候DIV元素还是一直在最下面, 因为他是非窗口类的, 其他的元素都会在DIV元素之上. 当你把SELECT元素的z-index值设的比5大的时候, SELECT元素就会在IFRAME之上. 当你把SELECT元素的z-index值设的比5小的时候, 它就会在IFRAME之下了.

当你把SELECT元素的z- index值设为5, IFRAME会在SELECT元素之上, 因为IFRAME是最后的元素, 因此, 它就会比SELECT优先. 如果SELECT元素在IFRAME后面, 那么在z-index值相同的时候, 它就会在IFRAME之上了.

在Internet Explorer 5.5中Z-index是如何工作的
在Internet Explorer 5.5中, z-index 被带到了一个新的水平. IFRAMEs不再是窗口类元素. 更多的相关信息请到以下地址查阅”Windowless IFRAME Elements”标题:
http://msdn.microsoft.com/workshop/author/dhtml/overview/compat.asp#WindowlessFrames

这使得SELECT元素变成了唯一的窗口类元素. 如果你在Internet Explorer 5.5中使用前面的代码, 当你把SELECT 元素的z-index值设的比5大的时候, 它会在IFRAME之上. 当你把SELECT 元素的z-index值设的比5小的时候, IFRAME会覆盖SELECT元, 即使他们都是非窗口类元素. 这就是IFRAME的独特性: 它按照z-index顺序和非窗口类元素排列在一起, 并且还可以按照z-index和窗口类元素排列在一起, 比如在这里和SELECT元素一起.

当你把DIV 元素的z-index值设置的比IFRAME大时 (比如6), DIV会覆盖IFRAME. 这符合我们上面的描述: IFRAMEs是非窗口的, 并且它按照z-index的顺序和其他非窗口类元素排列在一起. 当你设的z-index值和IFRAME相等时 (比如5), 它还是会在DIV之上, 这是因为元素的顺序在起作用. 当你把DIV 元素的z-index值设置为6, 同时使SELECT元素和IFRAME的z-index值为5, 那么SELECT元素将会一直在DIV之上, 因为它是窗口类的元素.

然而, IFRAME会在SELECT之上是因为它在顺序上是最后. 为了避免这样, SELECT元素的z-index值必须比IFRAME大, 或者SELECT元素必须排在最后来保证在z-index值一样的情况下它会在IFRAME 之上. Because of this, z-indexing similar content can be difficult. To work around this, use the following methods:
• 使用样式表的Style属性在需要的时候隐藏和显示元素.
• Use DHTML Scriptlets. Although behaviors are usually preferred, this is one instance where scriptlets are preferred.
• 在Internet Explorer 5.5中, 你可以使用popup对象, 使用它你可以在任何元素之上显示丰富的内容. 这在菜单和工具提示功能上非常有用. 想了解更多, 请在下面的地址查阅”popup Object”:
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/popup.asp

• 使用非窗口类的ActiveX控件来代替窗口类对象. 不幸的是, 所有ActiveX控件都没有非窗口类的实现.

参考
想了解更多基于IE的Web开发解决方案, 请访问以下Web站点:
http://msdn.microsoft.com/workshop/entry.asp

http://msdn.microsoft.com/ie/

http://support.microsoft.com/?scid=http%3a%2f%2fsupport.microsoft.com%2fhighlights%2fiep.asp%3ffr%3d0%26amp%3bsd%3dmsdn
________________________________________
应用于
• Microsoft Internet Explorer 6.0 Service Pack 1
• Microsoft Internet Explorer 5.5 Service Pack 2 and Internet Tools
• Microsoft Internet Explorer 5.0

关键字: kbbug kbdhtml kbfaq kbieobj kbinfo KB177378

nickcheng发表于2004年十一月19日 http://nickcheng.com

******************************************************************************

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元素除外。
⑵ 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元素默认的显示优先级规则。本文介绍的补救办法确实行之有效,不过如果你实在不想用这种办法,那就只好考虑改变页面布局,避免表单元素和样式元素的显示区域重叠。


引自: http://www.yzcc.com/2004/10-2/112528.html
分享到:
评论

相关推荐

    HTML5&CSS3网页制作:zindex层叠等级属性.pptx

    注意:z-index属性仅对定位元素有效。 语法格式 z-index: auto | ; z-index层叠等级属性 示例:设置相对定位的盒子z-index层叠等级依次降低 #one { z-index: 3; } #two{ z-index: 2; } #three { z-index: 1; } 总结 ...

    深入理解css中position属性及z-index属性(推荐)

    最后将会介绍和position属性密切相关的z-index属性。 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响。 如...

    ActiveX插件的Z-Index属性无效问题解决

    在Web开发中我们经常通过z-index设置多个元素之间的层叠关系,这种...所有的有窗体元素都会出现在无窗体元素之上,而有窗体元素和无窗体元素自身遵循z-index属性约束(注意使用z-index必须设置相应元素的position为a

    举例详解CSS的z-index属性的使用

    通常认为HTML页面是二维的,但实际上,CSS还有一个z-index属性,允许层叠元素。  所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, 当他们相互覆盖时...

    深入解析CSS中z-index属性对层叠顺序的处理

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复...

    CSS教程:元素层叠级别及z-index

    原文:http://rong179.blogbus.com/logs/24966909.html声明定位元素:position属性值设置除默认值static以外的元素...平台:win/IE win/FFz-index:用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序值:

    css 层叠与z-index的示例代码

    HTML 元素是一个三维的概念,除了水平和垂直方向外,还会在“z 轴”上层层叠加。 既然是叠加,就会涉及到先后顺序的问题,规范中称之为“层叠等级”。 默认情况下,图文是网页的核心,因此内联元素的等级理应最高;...

    css元素常见定位应用.html

    static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素...

    html元素遮挡flash详解示例

    复制代码代码如下:wmode参数:transparent模式:可用z-index控制层级opaque模式:可用z-index控制层级window模式:flash层级在浏览器核心显示窗口之上,flash会盖住与他重合的html 情景1(可修改flash的wmode参数)...

    使用HTML语言和CSS开发商业站点.zip

    1. 使用position属性定位页面元素。 2. position属性值有static、relative、absolute和fixed,...3. 使用z-index属性设置定位元素的duidie顺序。 4. 使用opacity或filter:alpha(opacity=x)方式设定网页元素的透明

    HTML5图片层叠的实现示例

    要想实现上图的图片重叠,只需设置属性元素的position和z-index属性。 z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。即z-index的值越大显示越靠上。 position:有以下...

    解决控件遮挡问题:关于有窗口元素和无窗口元素

    不知道朋友们有没有碰到过控件的遮挡问题,最典型的就是DropdownList和ActiveX的遮挡,HTML的z-index就是用于处理这个问题,但是直接设置这个属性还不行,因为这中间还牵扯到有窗口元素和无窗口元素的问题。...

    JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

    分享给大家供大家参考,具体如下: HTML部分: ... /*设置z-index属性必须设置position:relative或absolute*/ position:relative; /*设置div位于遮罩的上方*/ z-index:2; width:300px; height:

    css入门笔记

    本身具备width和height属性的元素 ex:img,table 注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小的时候,会产生溢出的效果,默认都是纵向溢出 属性:overflow,overflow-x,...

    asp.net 页面版文本框智能提示JSCode (升级版)

    原本准备在上一篇中直接修改的,无奈...index或div的z-index属性均无济于事),关于这个就是利用了一个iframe,将其盖在div要显示的位置,然后div再放在iframe上方即可。即使下方有select元素,也没关系了。下面是最

    利用HTML5+CSS3实现3D转换效果实例详解

    不理解的话可以参考定位属性的z-index属性,那个在某种意义上就是让元素在z轴的移动。 在2d转换模块中我们研究了rotateX()和rotateY()方法,就是绕x轴和y轴旋转,这其实就是3d模块的一种表现,当然要看到近大远小的...

    利用HTML5的新特点实现图片文件异步上传

    思路:下面代码中我利用css的z-index属性将input=file”标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮。 复制...

    《CSS设计彻底研究》【中文PDF+源代码】

    4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 ...

Global site tag (gtag.js) - Google Analytics