In the process of designing HTML pages, we often encounter problems caused by form elements covering style elements. Figure 1 is a typical example. Don't underestimate this seemingly "low-level" problem. Similar problems are not uncommon even on some larger websites. This article explores the root cause of this problem and proposes a remedy - the reason why I say a remedy rather than a permanent solution is because the two giants Microsoft and NetScape have no countermeasures yet.
1. 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), radio input box (INPUT type=radio) , check input box (INPUT type=checkbox), etc. Common non-form elements include: link tag (A), DIV tag, SPAN tag, TABLE tag, etc. The fundamental reason why form elements override style elements lies in the default display priority rules of HTML elements. For example: frame elements always take precedence over other HTML elements and therefore are always displayed at the front; form elements always take precedence over all non-form elements.
All these HTML elements can be divided into two categories according to their display requirements, namely Windowed Elements and Windowless Elements. Windowed elements include: SELECT elements, OBJECT elements, plug-ins, and IFRAME elements in IE 5.01 and earlier versions. Windowless elements include: most ordinary HTML elements such as links and TABLE tags, most form elements except SELECT elements, and IFRAME elements in NS6+/IE 5.5 and later. The issues discussed in this article are mainly related to windowed HTML elements. The crux of the problem is that the operating system always displays windowed elements in front of windowless elements by default.
2. Browser type and display priority
According to the browser type, the display order of HTML elements is also different, which is summarized as follows:
⑴Netscape/Mozilla
In versions prior to NS Browser 6.0, form elements always had higher priority than other HTML elements. But in the NS 6+ browser, the display order of IFRAME elements and all form elements is either determined by the value of the z-index attribute of CSS, or by the order in which they appear in the HTML page, except for the SELECT element.
⑵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 in the HTML page, except for the SELECT element.
⑶ Opera
In the latest Opera (7.10*) browsers, all form elements, including SELECT, are prioritized for display based on the z-index attribute or the order in which they appear in the HTML page. However, the latest Opera browser does not display IFRAME as a windowless element. IFRAME is regarded as a windowed element and takes precedence over all windowless elements in the display order.
3. CSS z-index attribute
We know that the z-index attribute of CSS can be used to control the overlay order of any HTML element when it is displayed. When multiple HTML elements overlap in the same space, the element with a larger z-index value will overwrite the element with a smaller z-index value.
But the z-index attribute value is not omnipotent. As mentioned before, windowed elements are always displayed in front of windowless elements, and the z-index attribute value only plays a decisive role between elements of the same type. To put it figuratively, windowed elements and windowless elements are like drawing on two different canvases in the same browser window. The two types of elements are self-contained, and their z-index attributes are only relative to other elements on the same canvas. kick in.
4. Remedy
As far as current browsers are concerned, a more effective remedy is: when a windowless element needs to be covered with a window element, use a script to dynamically hide the window element. Here's a complete example:
<html><head>
<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></head><body>
<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 one</div>
<!--Four menu items in total-->
</div><P>
<select id=lb_1 name=lb_1>
<option value=-1/>Select list
<!--Three options-->
</select>
</div>
</body></html>
The <STYLE> part of the page defines three styles, which are used for menu bars, menu items, and selection lists respectively. The style definition ensures that the display areas of menus and selection lists overlap. The <BODY> section contains definitions for menus and <SELECT> selection lists. When the mouse passes 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 over a menu item, the menu is displayed with high brightness (setStyle function), and when the mouse leaves the menu item, it is restored to the default display mode (setDefault function). The running effect of the page is shown in Figure 2. Comment out the document.getElementById(lb_1).style.visibility=hidden statement in the showMenu function to see the effect in Figure 1.
<descript>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</descript>
In short, the root cause of form elements overriding style elements lies in the default display priority rules of HTML elements. The remedies introduced in this article are indeed effective, but if you really don't want to use this method, then you have to consider changing the page layout to avoid overlapping the display area of form elements and style elements.