IE Z-Index issues

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

Perhaps repeat question of: http://stackoverflow.com/questions/6242034/ie-8-iframe-and-flash-object-ignores-z-index — Andy, Oct 31 '12 at 15:39
z-indexes are relative only to containers. your `-1` is in a different block than the `2` — Marc B, Oct 31 '12 at 15:40
how do I make the header block appear over the section block then? — Goulash, Oct 31 '12 at 15:47

score 2 · Accepted Answer · answered Oct 31 '12 at 15:40

2

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

answered Oct 31 '12 at 15:40

defau1t

10,593
2
35
47

@HemenAshodia: You should give position to your parent div of iframe. btw king posted the question and where did you try the solution. – defau1t Oct 31 '12 at 18:34
on his website i made changes in my computer – Hemen Ashodia Nov 01 '12 at 08:31

score 1 · Answer 2 · answered Oct 31 '12 at 16:20

1

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.

answered Oct 31 '12 at 16:20

Travis

63
4

score 0 · Answer 3 · answered Aug 20 '14 at 19:08

0

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.

answered Aug 20 '14 at 19:08

OG Sean

971
8
18

IE Z-Index issues

3 Answers3

Linked