1. Display priority of HTML elements
Commonly used form elements in HTML include: textarea, select, input, and password ), input type = radio, input type = checkbox, and so on. Common Non-form elements include link tag (A), div tag, span tag, table tag, and so on. The root cause of form elements overwriting style elements is the default display priority rules of HTML elements. For example, frame elements always take precedence over other HTML elements, so they are always displayed at the beginning; form elements always take precedence over all non-form elements.
All these HTML elements can be divided into two types based on their display requirements, namely, the window HTML element and the window-less HTML element ). Window elements include: Select, object, plug-in, IE 5.01, and IFRAME elements earlier. Window-less elements include most common HTML elements, such as links and table tags, most form elements except select elements, ns6 +/IE 5.5, and IFRAME elements later. The problem discussed in this article is mainly related to HTML elements with Windows. The crux of the problem is that the operating system always displays elements with windows in front of elements without windows by default.
Ii. browser type and display priority
The display order of HTML elements varies according to the browser type, which is summarized as follows:
(1) Netscape/Mozilla
In versions earlier than NS browser 6.0, form elements always have a higher priority than other HTML elements. However, in the NS 6 + browser, the display order of IFRAME and all form elements is determined by the Z-index attribute value of CSS, or by the order in which they appear on the HTML page, except for select elements.
(2) Internet Explorer
In the latest IE browser (6.0), the IFRAME element and all form elements determine the display priority based on the Z-index attribute value or the order in which they appear on the HTML page, except for the select element.
(3) opera
In the latest opera (7.10 *) browser, all form elements, including select, determine the display priority based on the Z-index attribute or their order of appearance on the HTML page. However, the latest Opera browser does not display IFRAME as a non-window element. IFRAME is regarded as a window element, which takes precedence over all non-window elements in the display order.
Iii. Z-index attribute of CSS
We know that the Z-index attribute of CSS can be used to control the overwrite order when any HTML element is displayed. When multiple HTML elements overlap in the same space, elements with a large Z-index value will overwrite elements with a small Z-index value.
However, the Z-index attribute value is not omnipotent. As mentioned above, elements with windows are always displayed before those without window elements. The Z-index attribute value is only valid between elements of the same type. In an image, window elements and window elements are drawn on two different canvases of the same browser window. The two elements are self-contained, their Z-index attribute also takes effect only for other elements on the same canvas.
Iv. Remedy
For the current browser, a more effective remedy is: when there is no window element to overwrite the window element, use the scriptProgramHide window elements dynamically. The following is a complete example:
<HTML> <Style type = "text/CSS">
. Menublock {position: relative; top: 14px; width: 165px; Border: 2px solid black ;}
# Submenus {position: relative; left: 15px; top: 15px; width: 171px;
Padding-left: 2px; padding-Right: 2px; Border: 2px solid black;
Z-index: 100; visibility: hidden ;}
# Lb_1 {position: absolute; left: 10px; top: 40px ;}
</Style>
<SCRIPT type = "text/JavaScript">
VaR isactive = false;
Function showmenu (){
Isactive = true;
// Document. getelementbyid ("lb_1"). style. Visibility = "hidden ";
Document. getelementbyid ("submenus"). style. Visibility = "visible ";
}
Function hidemenu (){
Isactive = false;
SetTimeout ('hide () ', 100 );
}
Function hide (){
If (! Isactive ){
Document. getelementbyid ("submenus"). style. Visibility = "hidden ";
Document. getelementbyid ("lb_1"). style. Visibility = "visible ";
}
}
Function setstyle (menuitem ){
Isactive = true;
Menuitem. style. backgroundcolor = "gray ";
Menuitem. style. color = "# ffffff"
}
Function setdefault (menuitem ){
Isactive = false;
Menuitem. style. backgroundcolor = "";
Menuitem. style. color = ""
Hidemenu ();
}
</SCRIPT>
<Div id = "Main" style = "position: absolute; width: 200px;">
<Div id = "menublock" class = "menublock" onmouseover = "showmenu ();"
Onmouseout = "hidemenu ();"> CSS menu </div>
<Div id = "submenus">
<Div id = "0" onmouseover = "setstyle (this )"
Onmouseout = "setdefault (this)"> menu item 1 </div>
<! -- Four menu items -->
</Div> <p>
<Select id = "lb_1" name = "lb_1">
<Option value = "-1"/> select a list
<! -- Three options -->
</SELECT>
</Div>
</Body>
The <style> section of the page defines three styles, which are used for menu bar, menu item, and selection list. The style definition ensures that the display areas of the menu and selection list overlap. The <body> part contains the menu and the definition of the <SELECT> select list. When you move the cursor over the menu bar, the JavaScript function showmenu is executed to display the menu and hide the select selection list. After the mouse leaves, the hidemnu function hides the menu and restores the selection list. The remaining JavaScript Functions are mainly used to simulate menu actions. When the mouse passes through the menu item, the menu is displayed with a high brightness (setstyle function ), when you move the mouse away from the menu item, it is restored to the default display form (setdefault function ). The running result 2 of the page is shown. Comment out the document. getelementbyid ("lb_1"). style. Visibility = "hidden" statement in the showmenu function to see Figure 1.
<Descript>
</Descript>
In short, the root cause of form elements overwriting style elements is the default display priority rules of HTML elements. The remedy described in this article is indeed effective, but if you really don't want to use this method, you have to consider changing the page layout to avoid overlapping display areas of form elements and style elements.
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
