Forms On Positioned Elements


















Form controls don't follow normal z-index rules. This means that some of the form controls will show on top of a positioned element when that element is above the form - even when the element has a higher z-index. The only work-around I know of is to put the form on a positioned element and hide it when it would otherwise be in the way.

This technique worked in all my tests except with Mozilla 0.9.7. With Moz the listbox scrollbar was still visible even after it's container was hidden.

Here's another experiment with forms on positioned elements.

cross-browser.com



sample checkbox

Hide form when menu opens
Do not hide form