Resolving HTML form element overlay STYLE element issues

Solve | The problem

In the process of designing an HTML page, you often encounter problems with form element overlay style elements, and figure one is a typical example. Do not underestimate this seemingly "low-level" problem, even if some of the larger web site similar problems are not uncommon. This article explores the root causes of the problem and suggests a remedy-the reason why the remedy is not a permanent one, because neither Microsoft nor Netscape is yet in the game.

The display priority of HTML elements

Commonly used form elements in HTML include: Text area (TEXTAREA), list box (SELECT), Text input box (input type=text), Password input box (input type=password), input type= Radio), check input box (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 a form element's overriding style element is the default display precedence rule for HTML elements, such as: frame elements always take precedence over other HTML elements, and therefore always appear in the front; the form element always takes 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: Select elements, Object elements, Plug-ins, IE 5.01, and the IFRAME elements in earlier versions. Elements that are windowless include most common HTML elements, such as links and table tags, in addition to most form elements outside the Select element, ns6+/ie 5.5, and the IFRAME element in the later version. The problem discussed in this article is mainly related to the HTML element with Windows, the crux of the problem is that the operating system always displays the elements of the window in front of the windowless elements by default.

Second, browser type and display priority

HTML elements are displayed in a different order by browser type comparison, as summarized below:

⑴netscape/mozilla

In previous versions of NS Browser 6.0, form elements always had a higher priority than other HTML elements. However, in the NS 6+ browser, the order in which the IFRAME element and all the form elements are displayed is determined by the Z-index property value of the CSS, or by the order in which they appear in the HTML page, except for the SELECT element.