|
HTML元素的Z-index属性是如何工作的(1)
摘要
在一个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
|
