Setting z order

HTML & CSS
1

Hi

How do I set the order in my html file so that the video goes beneath my button?
My order isn’t working for me (attached screenshot).

Below is my code:


<div id="home-content-3">
<img src="images/btnVideo_off.jpg" style="z-index:999;" /><br/>
<iframe style="margin-top:-20px;z-index:-1;" width="239" height="215" src="http://www.youtube.com/embed/3Ej00kzpAy0?hd=1&rel=1&autohide=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>

<br/><br/>
<a href="#" target="_blank"><img src="images/TheBuzz.jpg" width="239" height="244" border="0" /></a>
</div>
2

Hi,

Only positioned elements can have a z-index so if the element is not positioned add position:relative to it.

Flash by default (youtube videos) also sits on top of the window so I believe you need to add the wmode parameter to the flash url.

e.g.


<img src="images/btnVideo_off.jpg" style="z-index:2;[B]position:relative[/B];" /><br/>
<iframe style="margin-top:-20px;[B]position:relative;[/B]z-index:1;" width="239" height="215" src="http://www.youtube.com/embed/3Ej00kzpAy0?hd=1&rel=1&autohide=0&showinfo=0?[B]wmode=transparent[/B]" 
frameborder="0" allowfullscreen ></iframe>
3

Another thing to keep in mind is z-index is scoped just like absolute positioning is scoped - that is no matter how high you set the z-index of an element, it will never appear in front of an element that has a higher z-index than a parent of the element your setting the z-index on. Consider the following.


<nav style="position: relative; z-index: 1;">
  <div id="A" style="position: absolute; z-index: 100;">
</nav>
<div id="B" style="position: relative; z-index: 2;"></div>

In the above, div “A” can never be in front of div “B” because, no matter how high it’s z-index is set, the z-index of it’s parent, nav, is lower than the z-index of div “B”.