网页上的DIV, IFRAME标签, ActiveX控件之间互相覆盖的问题

网页中的控件可以分为两类: 有窗体的(Windowed element)和无窗体的(Windowless element)

 

有窗体的控件包括:

• <OBJECT> 标签元素
• ActiveX 控件
• Plug-ins 插件
• Dynamic HTML (DHTML) Scriptlets
• SELECT elements
• Internet Explorer 5.01以及更早的版本上的IFRAMEs

无窗体控件包括:

• Windowless ActiveX controls
• Internet Explorer 5.5 以及以版本中的IFRAMEs
• 大多数的DHTML元素, 比如说超链接或表格

如果控件或元素重叠, 那么如何确定谁显示在上面?

==============

不论容器的配置如何, 所有的有窗体的元素(Windowed element)都会被显示在无窗体的元素(Windowless element)之上.

但是, 在所有的无窗体的元素之间, 它们还是会遵循z-index属性的约束. 正如无窗体的元素在彼此之间遵循z-index约束一样.

 

所有的无窗体元素(Windowless element)都被渲染在相同的MSHTML平面上, 有窗体元素(Windowed element)被画在一个单独的MSHTML平面上. 你可以使用z-index属性来操纵相同平面上的元素的高低, 但是却不能影响其他平面上的元素. 你可以重新安排相同平面内的z-index属性, 但是有窗体的平面会永远地画在无窗体元素的上面.

 

关于z-index在IE5中如何工作, 请参考下面的KB.

 

这里将z-index如何在IE5以后的版本中工作的要点摘抄如下:

• 如果select的z-index的值大于IFRAME, select会画在IFRAME的上面
• 如果select的z-index的值小于IFRAME, IFRAME会盖住select元素
• 如果DIV的z-index的值大于IFRAME, 它会被画在IFRAME的上面
• 如果DIV的z-index的值小于IFRAME, IFRAME会被画在DIV的上面
• 如果DIV的z-index的值等于IFRAME, 那么谁画在上面就取决于在代码中, 谁出现在比较靠后的部分. 后面的会盖住前面的.

参考资料

==============

INFO: How the Z-index Attribute Works for HTML Elements

http://support.microsoft.com/kb/177378