Question

While scrolling my web page a DIV which have a video is not going behind the top DIV.
On my web page a top DIV,which have folloing css styling

#header{
font-size:11px;
height:25px;
position:fixed;
top:0;
width:960px;
z-index:1000;
}

Now after clearing all floated element,I added a video on a wrapper DIV like same as this way..

<div id="vedio">
<object>video code</object>
</div>

Applying CSS

#vedio{
position:relative;
text-align:center;
z-index:0;
}

After doing all stuff video is not going behind header in FireFox3.6,Google Chrome.Please Someone Help me out.
Thank you

Answer 1

Which Browser are you testing in? IE has z-index:0; issues, always start with 1 or -1 and go from there.

Edit:

Add this to your object:

<param name="wmode" value="transparent">

and this to your embed:

wmode="transparent" and remember to close your embed tag with either </embed> or seeing as you’re using XHTML doctype: />. I added these in firebug and it works fine 🙂

<object width="606" height="385">
            <param name="movie" value="http://www.youtube.com/v/RjUIarUAioY&hl=en_US&fs=1&color1=0x2b405b&color2=0x6b8ab6"></param>
            <param name="allowFullScreen" value="true"></param>
            <param name="allowscriptaccess" value="always"></param>
            <param name="wmode" value="transaprent"></param>
            <embed src="http://www.youtube.com/v/RjUIarUAioY&hl=en_US&fs=1&color1=0x2b405b&color2=0x6b8ab6"
                   type="application/x-shockwave-flash"
                   allowscriptaccess="always"
                   allowfullscreen="true"
                   width="606" height="385"
                   wmode="transparent">
            </embed>
        </object>

You also had z-index; 999; on #wp-admin-bar *, I added it to the parent; #wp-admin-bar .padder just to make sure the children would inherit the value.