There are many ways to classify elements on a Web page. For the purposes of this article and the
z-index attribute, we can divide them into two categories: windowed and windowless.
Windowed Elements
loadTOCNode(3, 'summary');
| • | <OBJECT> tag elements |
| • | ActiveX controls |
| • | Plug-ins |
| • | Dynamic HTML (DHTML) Scriptlets |
| • | SELECT elements |
| • | IFRAMEs in Internet Explorer 5.01 and earlier |
NOTE ActiveX controls are implemented as windowless and actually fall into the windowless category. By default, Microsoft Visual Basic and Microsoft Foundation Class (MFC) controls are windowed, but Active Template Library (ATL) controls are windowless.
Windowless Elements
loadTOCNode(3, 'summary');
| • | Windowless ActiveX controls |
| • | IFRAMEs in Internet Explorer 5.5 and later |
| • | Most DHTML elements, such as hyperlinks or tables |
MORE INFORMATION
loadTOCNode(1, 'moreinformation');
All windowed elements paint themselves on top of all windowless elements, despite the wishes of their container. However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other.
All windowless elements are rendered on the same MSHTML plane, and windowed elements draw on a separate MSHTML plane. You can use z-index to manipulate elements on the same plane but not to mix and match with elements in different planes. You can rearrange the z-indexing of the elements on each plane, but the windowed plane always draws on the top of the windowless plane.
-----------------------------------------------------------------------------------------------------------------------------------------------------
z-index 指定当两个或多个元素占据同一区域时应该按什么顺序绘制元素。只要您需要在文档中使用覆盖其他元素的绝对位置或相对位置的元素，设置 z-index 就能派上用场。有关绝对定位或相对定位的详细信息，请访问在答案最后的链接。正 z-index 值位于负（或更小的值）z-index 的上面。具有相同 z-index 值的两个对象根据源顺序堆叠。如果元素的 z-index 为正值，则位于没有定义 z-index 的文本之上，如果元素的 z-index 为负值，则位于之下。那么，为什么设置选择元素的 z-index 属性没有效果呢？显然，这里还有其他问题。这里所说的“其他问题”是指，元素并不都是平等创建的。
现在，进入正题，我们首先将 Web 元素分为两类：窗口化元素和无窗口元素。
窗口化元素：
| • | SELECT 元素。 |
| • | <OBJECT> 标记元素。 |
| • | Microsoft ActiveX 控件。 |
| • | 插件。 |
| • | 动态 HTML (DHTML) 脚本小程序。 |
| • | Microsoft Internet Explorer 5.01 和更低版本中的 IFRAME。 |
无窗口元素：
| • | 大多数 DHTML 元素，例如超级链接或表。 |
| • | 无窗口 ActiveX 控件。 |
| • | Internet Explorer 5.5 和更高版本中的 IFRAME。 |
所有窗口化元素将自身绘制在无窗口元素的上面，因为无窗口元素都绘制在同一窗口上，如果要看到窗口化元素，无窗口元素就必须绘制在底部。
但是，窗口化元素会遵循彼此相关的 z-index 属性，就像无窗口元素遵循彼此相关的 z-index 属性那样。原因在于，无窗口元素和窗口化元素绘制在不同的 MSHTML 平面上。您可以使用 z-index 来控制同一平面上的元素，但不要混合和匹配不同平面中的元素。您可以重新安排每个平面上的元素的 z-index 属性设置，但窗口化平面始终绘制在无窗口平面的上面。
这是设计所决定的。解决窗口化元素绘制在无窗口元素上面这一问题的最佳方式是，通过脚本隐藏选择元素，就像您已经发现的那样：
select1.style.display="none"; or
select1.style.visibility="hidden";
您可以使用 ASP 中的包含文件封装隐藏层的脚本，来减少维护工作。
第二种方法是，将另一个窗口化元素与选择元素一起使用，这样，z-index 属性就由这两个元素共同决定，因为它们都是窗口化元素。还可以编写实现选择元素的无窗口 ActiveX 控件，但此控件需要在客户端上安装。