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

Retired KB Content Disclaimer

View products that this article applies to.

This article was previously published under Q177378

SUMMARY

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

<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

Windowless ActiveX controls
IFRAMEs in Internet Explorer 5.5 and later
Most DHTML elements, such as hyperlinks or tables

Back to the top

MORE INFORMATION

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.

Back to the top

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.

Back to the top

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:

http://msdn.microsoft.com/workshop/author/dhtml/overview/compat.asp#WindowlessFrames (http://msdn.microsoft.com/workshop/author/dhtml/overview/compat.asp#WindowlessFrames)

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:
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/popup.asp (http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/popup.asp)
Use windowless ActiveX controls instead of windowed objects. Unfortunately, all ActiveX controls do not have windowless implementations.

Back to the top

REFERENCES

For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:

http://msdn.microsoft.com/ie/ (http://msdn.microsoft.com/ie/)

http://support.microsoft.com/iep (http://support.microsoft.com/iep)

Back to the top

APPLIES TO

Microsoft Internet Explorer (Programming) 6.0
Microsoft Internet Explorer 5.5
Microsoft Internet Explorer 5.0

Back to the top

kbbug kbdhtml kbfaq kbieobj kbinfo KB177378

Back to the top

Retired KB Content Disclaimer

This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.

Back to the top