Absolute Positioned Layer

In my projects, I frequently find the need to absolute position a div somewhere on the page (on Mint.com we things like position popups and autocomplete/menu widgets). At one time absolute positioning elements was a real chore, as browsers treat absolute positioning differently, depending on where the element is in the DOM and the positioning of the parent elements (more on positioning: Position Everything). I needed a technique to that allowed me to position any number of elements absolutely, without having to worry about x-browser hacks. The solution is to insert a layer div as the first element of body, which will parent all other elements needing to be position absolutely.

Example 1: HTML for Layer

… the rest of the page

This layer then needs the following CSS:

Example 2: CSS for Layer

#layer {
	height: 0px;
	left: 0px;
	overflow: visible;
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 10;

This CSS positions the layer, absolutely itself to the top left of the page and will work in all browsers (unless your body element is absolutely positioned). We give it a height of ZERO so that it doesnt affect or cover up any portion of the DOM. The width of 100% is a fix for browsers where overflow doesnt work right when the element has no width, and the z-index is set so that all children of layer have a slightly higher z-index than the rest of the page (as you will probably be positioning over other elements on the page). The final key to make this all work is setting the overflow to visible. That way, even though the children will have vertical dimensions greater than the layer div, they will still be visible and not affect other elements in the DOM.

Now if you include layer on your sites main template, then you always have the ability to add an x-browser enabled, absolutely positioned element. Simply append the element to the layer, position it to your liking, and manage whether it is visible or not. Here is a fun little layer example where I put a bunch of elements in layer and positioned them to look like the acid 2 test.