Summary
There are many ways to classify elements on a web page. Based on the purpose of this article and the Z-index attribute, we can divide them into two categories: window and non-window.
Window Elements
• <Object> flag Element
• ActiveX Control
• Plug-ins
• Dynamic HTML (DHTML) scriptlets
• Select Element
• Iframes in Internet Explorer 5.01 and earlier versions
Note:ActiveX controls are implemented according to the window class, but some are actually non-window classes. by default, Microsoft Visual Basic and Microsoft Foundation Class (MFC) controls are window classes, but the Active Template Library (ATL) space is non-window classes.
Non-window Elements
• Non-window ActiveX Controls
• Iframes for Internet Explorer 5.5 and later versions
• Most DHTML elements, such as hyperlinks and tables
More information
All window class elements will overwrite non-window class elements when being rendered, regardless of what their container is. however, window elements are arranged according to the Z-index attribute like non-window elements.
All non-window elements are displayed on the same mshtml plane, while window elements are displayed on a separate mshtml plane. you can use Z-index to operate elements in the same plane at will, but do not confuse elements in the same plane. you can rearrange the Z-index of elements on different planes, but the plane of the window class is always above the plane of the non-window class.
In Internet Explorer 5, how does Z-index work?
In Internet Explorer 5, iframes is a window control, which is arranged together with other window controls in the order of the Z-index attribute, such as the select element. if the Z-index value of IFRAME is greater than that of the select element, IFRAME will be displayed on the select element, and vice versa. if the Z-index value is the same, it depends on the position of the element on the page. That is to say, the last element to be put will be above the element above.
The followingCodeNote 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
When you set the Z-index value of the select element to 5, IFRAME will be placed above the select element. Because IFRAME is the final element, it will take precedence over select. if the select element is behind IFRAME, it will be above IFRAME when the Z-index value is the same.
In Internet Explorer 5.5, how does Z-index work?
In Internet Explorer 5.5, Z-index is taken to a new level. iframes is no longer a window class element. For more information, see the following link for "windowless IFRAME elements" title:
Http://msdn.microsoft.com/workshop/author/dhtml/overview/compat.asp#WindowlessFrames
This makes the select element a unique window element. if you use the previous Code in Internet Explorer 5.5, when you set the Z-index value of the select element to greater than 5, it will be above IFRAME. when you set the Z-index value of the select element to a value smaller than 5, IFRAME overwrites the select element, even if they are non-window elements. this is the uniqueness of IFRAME: it is arranged in the order of Z-index and non-window elements, and can be arranged together by Z-index and window class elements, for example, here it is used with the select element.
When you set the Z-index value of the DIV element to a greater value than IFRAME (for example, 6), The DIV will overwrite IFRAME. this complies with the preceding description: iframes is non-window, and it is arranged together with other non-window elements in the Z-index order. when the Z-index value you set is equal to IFRAME (for example, 5), it will still be on the DIV, because the order of elements is working. when you set the Z-index value of the DIV element to 6 and set the Z-index value of the select element and IFRAME to 5, the Select element will remain above the div, because it is an element of the window class.
However, IFRAME will be above select because it is the last in order. to avoid this, the Z-index value of the select element must be greater than IFRAME, or the select element must be placed at the end to ensure that it will be placed above IFRAME when the Z-index value is 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 the style sheet to hide and display elements as needed.
• Use DHTML scriptlets. Although behaviors are usually preferred, this is one instance where scriptlets are preferred.
• In Internet Explorer 5.5, you can use a popup object to display rich content on any element. this is useful in menus and tooltip functions. for more information, see "popup object" at the following address ":
Http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/popup.asp
• Use non-window ActiveX controls to replace window class objects. Unfortunately, all ActiveX controls do not implement non-window classes.
Reference
For more ie-based Web development solutions, visit the following Web sites:
Http://msdn.microsoft.com/workshop/entry.asp
Http://msdn.microsoft.com/ie/
Http://support.microsoft.com /? SCID = http % 3A % 2f % 2fsupport.microsoft.com % 2 fhighlights % 2fiep. asp % 3ffr % 3d0% 26amp % 3bsd % 3 dmsdn
________________________________________
Apply
• Microsoft Internet Explorer 6.0 Service Pack 1
• Microsoft Internet Explorer 5.5 Service Pack 2 and Internet tools
• Microsoft Internet Explorer 5.0
Keyword: kbbug kbdhtml kbfaq kbieobj kbinfo kb177378
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
