网页上的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
