Form Elements Overlapping a Styled Layer - Form Elements Overlapping a Styled Layer
Form Elements Overlapping A Styled LayerAn Illustration of the problem
Below is a layer created using div tag. You can see that the drop down box overlaps this layer, hiding its contents behind the drop down box.
This is a content layer, which could contain links for CSS navigation menus or it might hold some form elements for layout.
This is a content layer which could contain links for CSS navigation menus.
The z-Index behavior
The z-index CSS property specifies in which sequence HTML elements may be drawn when multiple elements occupy the same space in a window. This property is useful for rendering HTML elements, CSS styled layers and CSS menus when an overlapping preference is required. If we have 2 HTML elements that occupy the same physical real estate in a window, the element with the higher z-index value will overlap the element with the lower or lesser z-index value.
The catch in honoring z-index value is that all of the windowed elements will paint themselves on top of all of the windowless elements, but they will respect the z-index sequence among them. It's almost like windowed and windowless elements are drawn on 2 separate canvases in a browser window, making them completely independent of each other. Since they're on 2 separate canvases, their z-index property is only relative to the canvas on which the elements reside.Enough with the details, Where's the workaround?
The only possible solution to this problem (as of now) is to hide the "SELECT" element dynamically when the windowless elements are required to overlap the windowed element.
In the example above, the select elements are hidden when the CSS menu layer is displayed or made visible. This solution does a good job of taking care of this problem, which usually daunts developers.
Created: June 2, 2003
Revised: June 2, 2003