Question

I am having the classic problem, my header navigation bar is going under my iframe in the body, but my attempt at solving this with z-indexes has just left me more confused and still with the same problem :/
Here is my setup:

<header style="z-index:2;">
....code....
<nav align="center" style="z-index:2;">
....nav....
</nav>
</header>
<section id="content" style="z-index:-1;">
<div class="block">
    <div class="main">
    <!--[if IE]>
<div style="z-index:-2;">
<iframe width="900" height="900" style="position:relative; z-index:-2;" src="http://www.flytheflagtexas.com/athens/magazine/latest/index.html" ></iframe>
</div>
<![endif]-->
....code....

Why wont the z-index:-2 iframe appear under anything?
Here is the page: http://www.flytheflagtexas.com/athens/latest feel free to go through the code

Answer 1

z-index works only if you have given used positions for laying out the components. Otherwise it just doesn’t work. This means that z-index Applies to: positioned elements