Display Div on top of an object

[j2theoey]

ok here is what i am trying to do.

So basicly I have a movie from youtube and I am wanting to display a div on top of it. Its actually a tv with the tube area transparent... so it looks like your watching the movie on a tv... the problem is the object is always wanting to sit on top no matter the z-index... I searched and found what was supposed to be the solution "wmode" but it doesnt appear to work. Here is the code.

<div style="z-index: 1; position: absolute; top: 100px; left: 55px;">
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/DXFDrPDEXtk">
<param name="wmode" value="transparent">
<embed src="http://www.youtube.com/v/DXFDrPDEXtk" width="425" height="350" wmode="transparent" type="application/x-shockwave-flash" movie="http://www.youtube.com/v/DXFDrPDEXtk" />
</object>
</div>
<div style="z-index: 10; height:383px; width:506px; background-image:url(_images/tv.gif);"> </div>

If anyone knows how to do this without using javascript just a div and styles that would be great... thanks.

[penders]

z-index only has an effect on elements with

position:absolute;

or

position:relative;

- your 2nd DIV (tv.gif) does not seem to have a position set, so your first DIV (object) with

z-index:1;position:absolute;

will always be on top.

[SuzyUK]

is that tv.gif supposed to be a "frame" for the movie? if it is why does it have to be on top?

if you just want to frame the object, it could be done with one single div, and avoid the need for transparency

Suzy

[j2theoey]

Thanks... doing the position thing worked out... thanks so much