View Full Version : CSS positioning help

Nov 22nd, 2006, 09:25 AM
I'm having trouble creating layers on top of one another. Let's say I have two divs:

<div id="nav"></div>
<div id="content"></div>

and I want 'nav' to be on top of 'content', what do i need to do? I tried adding relative positioning to both and making the z-index for content smaller than nav but that didn't work! Can someone take a look?

If you click on 'Science' the subnav should popup OVER the image of the girl, but instead it pushes it down.

Nov 22nd, 2006, 12:24 PM
The subnav doesn't seem to be working for me, but that could be the somewhat agressive filtering on this location; what you are most likely looking for is absolute postioning.
This allows elements to be placed anywhere on the page in relation to either the viewport or another positioned element. Absolutely positioned elements can overlap others; they're taken out of the normal flow completely and therefore don't influence the position of elements left in the normal flow.

A decent introduction on absolute positioning (http://www.brainjar.com/css/positioning/default4.asp) can be found on Brainjar (halfway down the page and the next page). More detailed information can be found in the CSS 2.1 specs: Visual formatting model (http://www.w3.org/TR/CSS21/visuren.html).