Article ID: 177378
This article was previously published under Q177378
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.
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.
How Z-index Works in Internet Explorer 5In Internet Explorer 5, IFRAMEs are windowed controls and follow the z-index attribute with respect to other windowed controls such as SELECT elements. If the z-index of IFRAME is greater than the SELECT elements, the IFRAME draws on top of the SELECT elements and vice versa. If the z-index is the same, the order of the elements on the page takes precedence; therefore, the last element draws on top of the previous element.
The following sample code illustrates this:
The z-index of the IFRAME is set to a constant value of 5. When you enter a value that is higher than the rest of the elements, the DIV element always draws at the bottom because it is windowless, and the other elements draw on top of the DIV element. When you change the z-index of the SELECT element to a value that is greater than 5, the SELECT elements draws on top of the IFRAME. When you change the z-index of the SELECT element to a value that is less than 5, it draws on the bottom of the IFRAME.
When you set the z-index of the SELECT element to 5, the IFRAME draws on top of the SELECT element because the IFRAME is the last element and, therefore, it takes precedence over SELECT. If the SELECT element followed the IFRAME, the element draws on top of the IFRAME when the z-indexes are same.
How Z-index Works in Internet Explorer 5.5Z-indexing is taken to a completely new level in Internet Explorer 5.5 in which IFRAMEs are no longer windowed elements. For more information, see the "Windowless IFRAME Elements" topic in the following Microsoft Developer Network (MSDN) article:
http://msdn.microsoft.com/en-us/library/ms649493(v=vs.85).aspx#WindowlessFramesThis leaves the SELECT element as the only element that is windowed. If you use the preceding code to run the page in Internet Explorer 5.5, when you set the z-index of the SELECT element to a value that is greater than 5, it draws on top of the IFRAME. When you set the z-index of the SELECT element to a value that is less than 5, the IFRAME overlaps it, even though they are both windowless elements. This is what makes the IFRAME unique: it follows z-index with respect to windowless elements, and it supports z-index with respect to windowed elements like the SELECT element in this case.
When you set the z-index of the DIV element to a value that is greater than the IFRAME (such as 6), the DIV covers the IFRAME. This supports the above statement that IFRAMEs are windowless and that they follow z-order with respect to other windowless elements. When you set the z-index to a value that is less than or equal to the IFRAME (such as 5), it still draws on top of the DIV because the order of the elements takes precedence. When you set the z-index of the DIV to 6 and leave the z-index of the SELECT element and IFRAME at 5, the SELECT element always draws on top of the DIV because it is windowed.
However, IFRAME tries to draw on top of SELECT because it is last in the order. To prevent this, the value of the SELECT element's z-index must be greater than that of the IFRAME, or the SELECT element must be last in the list to ensure that the element always draws on top of the IFRAME when the z-indexes are the same. Because of this, z-indexing similar content can be difficult. To work around this, use the following methods:
For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:
Article ID: 177378 - Last Review: May 2, 2012 - Revision: 4.0