Absolute Positioning over Form Elements

Dec 9 2004

One of my coworkers asked me the other day about whether absolutely positioned elements can be placed over form elements. I recalled back to yesteryear when that certainly was an issue, though I wasn’t sure if that still affected browsers today. (Most commonly, the issue would come up with dynamic menus which form elements could sometimes peek through.)

After some Googling, I came up with this page at the DHTML Lab (aka WebReference) which addresses the issue. Granted, the article is a bit dated in its assessment, but it includes a test case which is still applicable (a draggable box which can be moved over form elements on the page).

I tried it in various browsers and found these results

  • Firefox 1.0: Works fine (both dragging over input elements and select elements)
  • IE 5.0, IE 5.5 and IE 6.0: Positioning over input elements works properly but fails on select elements (all versions)

So, if using a DOM menu on a page with IE, any select elements would peek through. Though dynamic menus are so 1999 and generally undesirable from an information architecture perspective, if dynamic menus were unavoidable, this form-peek issue could be worked around by dynamically setting the form to visibility:hidden on-the-fly when calling the menu (and unsetting that when the mouse cursor left the menu).

Back to the subject of dynamic menus and usability, Dev Articles has a write-up on some of their disadvantages. Here’s an excerpt:

No “you are here” state

As the whole navigation collapses once users have chosen a page, there is no indicator as to where they are in the site, how many other elements there are in the same section and how many levels deep they are. We need to make them aware in another way (breadcrumbs, repeating the section navigation in a visible way). […]

Among other points they make, dynamic menus are often mouse-dependent (which would exclude keyboard users such as users with disabilities); and, users can become overwhelmed with the sheer number of options in a menu. Dynamic menus may just be a passing fad — many of the information architects which I’ve talked with see them as a navigation system fading away much in the way that frames did.

One Comment to “Absolute Positioning over Form Elements”

  1. The IE peek-through is an accident of implimentation. Basically, a select box in IE is natively rendered by a standard windows control, and it happens outside the rest of IE’s rendering sequence.

    So don’t expect this to be fixed until IE’s rendering get’s a remake; likely to be when Avalon replaces the Web on Windows.


    I hope Firefox continues to take off, or we’re all in for some bumps.

    By Jeremy Dunck on December 10th, 2004 at 9:18 pm

Leave a Reply