Netscape
Mozilla
Apache
W3C
| home / programming / javascript / form |    [previous] [next] |
|
|
|
Form Elements Overlapping A Styled Layer An Illustration of the problemBelow 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. Example Netscape
Mozilla
Apache
W3C
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 |
| home / programming / javascript / form | [previous] [next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: June 2, 2003
Revised: June 2, 2003
URL: http://webreference.com/programming/javascript/form
