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 5
In 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:
<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
<input type="text" value="" id=text1 name=text1 ><p>
Select
<input type="text" value="" id=text2 name=text2><p>
IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1 style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:"
size=1 >
<option>Option1
<option>Option2
<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>
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.5
Z-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:
This 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:
- Use the Style attribute of cascading style sheets (CSS) to hide and show elements when required.
- Use DHTML Scriptlets. Although behaviors are usually preferred, this is one instance where scriptlets are preferred.
- In Internet Explorer 5.5, you can use the popup object, which allows you to display rich content on top of anything. This is very useful for menus and tool tip functionality. For more information, see the "popup Object" article at the following MSDN Web site:
- Use windowless ActiveX controls instead of windowed objects. Unfortunately, all ActiveX controls do not have windowless implementations.