IE Z-Index issues

问题

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

回答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

回答2:

Try this:

#nav{position:relative; z-index:2;}

and for the frame

#content{position:relative;}

You don't need to give a z-index value to the bottom element, but you can, just make it less then 2.

回答3:

Z-index only works reliably when you use

position: relative; 

or

position: absolute;

If you don't set position in CSS to one of the supported values, z-index won't have any effect.

来源：https://stackoverflow.com/questions/13161575/ie-z-index-issues