Form Elements Overlapping a Styled Layer - Form Elements Overlapping a Styled Layer | WebReference

Form Elements Overlapping a Styled Layer - Form Elements Overlapping a Styled Layer

Form Elements Overlapping A Styled Layer

  An 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.

CSS Menu

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.

  Final Observations
The layout of HTML is largely responsible for this problem and as such, we need to rely on this workaround. To avoid having to use this approach, we should consider all other layout options.



Created: June 2, 2003
Revised: June 2, 2003