Positioning the Drupal search form

It's terrible how the tiniest things can take the longest time. For months the search box on this site was visible in Firefox but not in Internet Explorer 6 and 7. It's a tale of stacking context and z-index that concluded a few minutes ago. Not that I worked exclusively on this problem for the entire duration.

This site uses a customised version of the Marinelli theme which, by default, places the search form at the top of the page above the banner image. To move it down to where it is now can be achieved with the CSS 'position' attribute (#utilities form {position:absolute;top:150px;} in the Marinelli theme's style.css). But now you have two items occupying the same two-dimensional position: the search form and the background image (and just being a background image doesn't ensure it stays in the background). The question of who goes on top (or in front, to be precise) requires working in 3-D which is where the z-index comes into play.

The CSS attribute z-index works in conjunction with 'position' to layer elements in and out of the plane of the page. The higher the z-index the further to the fore the item appears. The highest z-index appears at the front. So modifying the previous CSS to #utilities form {position:absolute;top:150px;z-index:100;} ensures the search box is visible over the banner image because the banner has no defined z-index and therefore is nominally at zero. For FireFox. But there's something else, and that's the stacking context.

Z-index layers elements backward and forward, but only within a stacking context. It has no effect on elements in a different stacking context. The stacking context is defined by the element on which the CSS position attribute is applied. So in our example it's the ID'utilities'. Somewhere in our theme there's a bit that says <div id="utilities"> blah blah blah </div> which formats the search form. Any items within the divs are part of the same stacking context and can be layered relative to one another using z-index. However, the theme has another bit that goes <div id="header"> blah blah blah </div>, which is where our banner is defined. And a z-index definition here has no effect on one in the other.

So what defines the layering of items in different stacking contexts? The first shall be last and the last shall be first. In other words, the first stacking context in the HTML page appears furthest back and successive items are displayed further to the fore. And this is why the search form is not immediately visible above the banner image; because it is defined first in the page.tpl.php file of the theme.

So to make the search appear in front, put it in the same stacking context as the banner so they can be layered using z-index. To do this, cut the <div id="utilities"> section out and paste it just before the closing tag of <div id="header">. To maintain the search form's position the 'top' attribute now needs adjusting to take account of the change, but the page renders the same in IE and FireFox.

OK fine, but why was there any difference in the browsers in the first place? Well, having written all this I'm no longer quite sure. Everything I'd read until now suggested that IE 6 and 7 incorrectly rendered the layering, but I'm starting to think that Firefox was wrong. After all, the banner and search form were originally in different stacking contexts and yet were subject to layering using z-index. I suppose the main thing is that it works now, but I'll update this if I reach a clearer conclusion.