Developer's manual

Absolute vs Relative

With absolute positioning

The navbar is removed from the normal document flow, which allows you to order the source code differently from the presentation - for example, on this site the navigation bar is at the very end of the source, so that the content comes first for serial browsers.

With relative positioning

The navbar is where you put it, fluid to window and text-size changes which alter its surrounding layout, and will displace other elements in its flow.

A vertical navbar is a block-level object, and creates a line-break after itself.

A horizontal navbar is 100% width and floated, which takes it out of the document flow at the point where it's rendered. To position the next element underneath you should give that element clear:both in CSS, or compensate with margin-top.

You can put a relatively-positioned navbar inside one or more containing elements, and position or float those as you need. You can also have an absolutely-positioned navbar inside a relatively-positioned container, and if you do then it's x,y co-ordinates will be from the origin of the container.

When the navbar is inside another container you should keep an eye on CSS encapsulation - any styles which apply to the container will cascade down to the navbar and menus, potentially affecting them. For more about this see Potential CSS conflicts.

If the navbar is anywhere except the very end of the source code, you'll also need some kind of "skip" link.

Allowing for virtual z-ordering

If your navbar is inside another positioned container, you may encounter a situation where the menus go beneath other elements, even though their z-index is higher. Here's why:

Virtual z-ordering is the stacking of elements by the order they come in the source code - in the example below the second outer container is higher than the first, even though their z-index values are the same, because it comes second in the source code.

But the z-index of a nested element is contextual with that of its parent - an absolutely-positioned element inside the first container cannot go above the second, however how high its z-index, because its overall z-order is always lower:

The relevant bits of CSS look like this:

• Skip code example

#first, #second {
	position:relative;
	z-index:1;
	}
	
#inner {
	position:absolute;
	z-index:10;
	}

To fix this problem you simply have to give the first container a higher z-index than the second. Then the inner element can have any z-index, and it will always come out on top:

• Skip code example

#first {
	position:relative;
	z-index:2;
	}
	
#second {
	position:relative;
	z-index:1;
	}
	
#inner {
	position:absolute;
	z-index:0;
	}

Which looks like this:

Thanks to Peter Bailey who drew my attention to this.

Another solution is simply to avoid relative positioning on the navbar's containing element. I sometimes see layouts using position:relative on elements that don't need to have positioning at all, and it may take something like this for the difference to be appreciated. If the containing element doesn't need to be positioned (in other words:

• if it isn't using left or top values, and
• there are no positioned elements inside it which rely on it having positioning)

then you can safely using position:static, and this problem won't occur.

Fixed positioning

Fixed positioning is absolute with respect to the viewport - as the page scrolls, the navbar comes with it. Fixed position demo.

CSS position:fixed is not supported in Internet Explorer 5 or 6, and is too unstable to apply for Mozilla Gecko browsers earlier than 1.3b (Netscape 7.1). However for Win/IE5-6 the script includes javascript emulation, which you can have in addition to standard position:fixed for other browsers, by setting the positioning variable to "allfixed".

If you don't use the emulation (or in those older mozilla builds, or if scripting is not available), fixed positioning degrades to absolute positioning. But that being the case, you should avoid putting a fixed navbar inside another positioned container - fixed positioning is not contextual with its parent the way absolute positioning is, so you could end up with a huge cross-browser discrepancy.

How positions are applied

The navbar position isn't actually position in the sense of using top, left or right - it's either margin or padding on the navbar <ul>, depending on the configuration you're using:

With a vertical navbar

An absolutely-positioned navbar uses margin. A relatively-positioned navbar uses padding.

With a horizontal navbar

The top position is margin for an absolutely-positioned navbar, or one that has a visible continuation strip, or it's padding for a relatively-positioned navbar with no continuation strip. The left position is an offset to the first link - the navbar <ul> always has 100% width.

With relative positioning, the navbar offsets are essentially just a tweak - it's where you put it in your HTML that matters. But bear in mind, nonetheless, that applying offsets to a relatively-positioned navbar will both move it and cause displacement, rather than merely moving it, as it would if it were position.

If you want to see what's what, you can use something like this (padding regions will show as a solid background color):

• Skip code example

#udm {
	background-color:red;
	}

If you want interactive content to go above padding regions, you'll need to position it above the navbar.

This manner of positioning was not really a choice - it was unavoidable due to the mire of browser bugs, quirks and differences-of-interpretation that plague us all. To the best of my knowledge there is no single, consistent way of applying the navbar positioning, which works in all supported browsers and is free of other side-effects. But if you know otherwise, please do let me know.