HTML form element Overlay style element problem and its remedy way

A typical example is a problem when designing an HTML page that often encounters a problem with a form element covering style elements. 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.

⑵internet Explorer

In the latest IE 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 browsers do not display an IFRAME as a windowless element, and the IFRAME is viewed as a window element, which takes precedence over all windowless elements in the display order.

Third, the CSS Z-index properties

We know that the CSS Z-index property can be used to control the order in which any HTML element is displayed. When more than one HTML element overlaps in the same space, an element with a larger Z-index value overwrites the element with a Z-index value.

But Z-index attribute values are not omnipotent. As mentioned earlier, the elements of a window always appear before the windowless element, and the Z-index attribute value only determines between the same class elements. Figuratively speaking, there are window elements and windowless elements like the two different canvases painted in the same browser window, the two types of elements are self-contained, and their Z-index properties work only relative to other elements on the same canvas.

Iv. the way of redress

As far as browsers are concerned, a more effective remedy is to use a script program to dynamically hide window elements when windowless elements need to be covered with window elements. The following is a complete example:

<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;
file://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"
>CSS Menu </div>
<div id= "submenus" >
<div id= "0"
> menu item One </div>
<!--A total of four menu items-->
</div><P>
<select id= "lb_1" name= "lb_1" >
<option value= "-1"/> select list
<!--three options-->
</select>
</div>
</body>

The <STYLE> section of the page defines three styles, which are used for menu sheets, menus items, select lists, guaranteed menus through style definitions, and the display area of the selection list overlaps. The <BODY> section contains definitions for menus and <SELECT> selection lists. When the mouse passes through the menu bar, the JavaScript function executes ShowMenu, displays the menu, and hides the select list. After the mouse leaves, the Hidemnu function hides the menu and restores the selection list. The rest of the JavaScript functions are primarily used to simulate menu actions, the mouse menu items with a high Brightness display menu (SetStyle function), when the mouse leaves the menu item, it restores the default display form (SetDefault function). The page works as shown in Figure two. document.getElementById ("Lb_1") in the ShowMenu function is commented out and the hidden effect can be seen.

<descript>

</descript>

In summary, form elements overwrite style elements at the root of the HTML element's default display precedence rule. The remedies described in this article do work, but if you really don't want to do this, you have to consider changing the page layout to avoid overlapping the display areas of form elements and style elements.