In the process of designing an HTML page, you often encounter problems with the form element overriding style elements, which is a typical example. Do not underestimate the seemingly "low" problem, even if some of the larger sites on similar issues are not uncommon. This article explores the root causes of the problem and proposes a remedy--the remedy rather than a once-and-for-all solution, because Microsoft and Netscape both have no response.
First , the display priority of HTML elements
Common form elements in HTML include: Text area (TEXTAREA), list box (SELECT), Text input box (input type=text), Password input box (input type=password), Radio input box (input type= Radio), checkboxes (input type=checkbox), and so on. Common non-form elements include: Link tags (A), div tags, span tags, table tags, and so on. The root cause of the form element overriding style element is the default display precedence rules for HTML elements, such as: frame elements always take precedence over other HTML elements, so they always appear first, and form elements always take precedence over all non-form elements.
All of these HTML elements can be divided into two categories according to their display requirements, namely, the HTML element with the window (windowed element), the windowless HTML element (windowless element). Elements that have Windows include: The Select element, the object element, the plugin, IE 5.01, and the IFRAME element in earlier versions. Windowless elements include: Most of the ordinary HTML elements, such as links and table tags, except for most form elements outside of the Select element, Ns6+/ie 5.5 and later in the IFRAME element. The problems discussed in this article are mainly related to the HTML elements with Windows, the crux of the problem is that the operating system always displays the window elements in front of the windowless elements by default.
second, browser type and display priority
The order in which HTML elements are displayed varies by browser type, as summarized below:
⑴netscape/mozilla
In previous versions of NS Browser 6.0, form elements always had a higher priority than other HTML elements. In the NS 6+ browser, however, the display order of the IFRAME element and all form elements is either determined by the CSS's Z-index property values, or by the order in which they appear in the HTML page, except for the SELECT element.
⑵internet Explorer
In the latest Internet Explorer (6.0), the iframe element and all form elements determine the display precedence based on the value of the Z-index property or the order in which they appear in the HTML page, except for the SELECT element.
⑶opera
In the latest opera (7.10*) browser, all form elements, including Select, determine the display priority based on the Z-index property or the order in which they appear in the HTML page. However, the latest opera browser does not display an IFRAME as a windowless element, and the IFRAME is considered a window element, which takes precedence over all windowless elements in the display order.
third, the Z-index property of CSS
We know that the Z-index property of CSS can be used to control the order of overwrite of any HTML element when it is displayed. When multiple HTML elements overlap in the same space, elements with a large z-index value will overwrite elements with smaller z-index values.
But the Z-index property value is not omnipotent. As mentioned earlier, the element that has a window always appears before the windowless element, and the Z-index property value is only determined between the same class of elements. Visually, there are window elements and windowless elements that are like paintings on two different canvases in the same browser window, each of which is self-contained, and whose Z-index properties work only relative to other elements on the same canvas.
Iv. the way to remedy
As far as the current browser is concerned, a more effective remedy is to use a scripting program to dynamically hide a window element when windowless elements are required to overwrite the window element. The following is a complete example:
Onmouseout= "Hidemenu ();" >CSS Menu
Onmouseout= "SetDefault (This)" > menu item One
SELECT list
of the page
