How do I use CSS to place a flash object behind a div?

I am trying to place a flash object (<object>) behind a div tag. How would I do this?

I've been trying z-index:-1; on the object tag but it isn't working.

Thanks.

 

when setting z-index properties are you set the position too?
it should be like this :
.class{
position:relative; /*position could be relative or absolute */
z-index:10;
}

try wrap the flash object on a div ( let say div#flash ) and the other container as is sibling ( i.e div#content )
let say you want to make the div#content placed above the div#flas try something like this :

<style>
#wrapper{
position:relative;
z-index:1;
}
#flash{
position:absolute;
width:300px;
height:400px;
z-index:5;
}
#content{
position:absolute;
width:200px;
height:300px;
z-index:10;
top:50px;
left:50px;

/*to make things clearer*/
border:2px solid #808080;

}
</style>

<div id="wrapper">
<div id="flash"><object etc goes here /></div>
<div id="content" ><p>sample content </p></div>
</div>

Code (markup):

hope this helps

 

I got it! I had to put a param on the flash object that makes it transparent, which also lets z-index work on it.

 

wmode="transparent" uses a lot of cpu cycles. Unless your flash object is not rectangular, it is less cpu intensive to set wmode="opaque", which will also cause flash to not be a windowed object.

Be kind to your visitors.

cheers,

gary

 

Thanks for the advice.