Z-index and Floating divs

[copaesthetic]

I’m in the final stages of completing my website. I want to insert a Flash based menu, however its going to require being placed "under" another floating div. The floating div #ribbon is going to be on top of the floating div #menu. Also to keep things simple, I set the menu with the same dimensions and rules as its #branding_container div.

Now I’ve heard of using z-index, but when I tried it the divs that were stacked seemed to flicker and exchange places when I viewed the site with Firefox…

Code:

Code:

#branding_index {
background-attachment: scroll;
background-position: center -1px;
background-repeat: no-repeat;
margin: 0 auto;
height: 305px;
}

#branding_container {
width: 1069px;
margin: 0 auto;
}

#menu {
float: left;
{

#ribbon {
float: left;
width: 141px;
margin-left: 47px;
}

#seal {
float: right;
width: 100px;
margin-top: 131px;
margin-right: 108px;
}

[noahgelman]

Z-index should work to get a div on top of a flash file. There are somethings that could cause it to fail. Mostly it’s transparencies. If anything in the div has any kind of transparency, it will automatically be kicked behind the flash.

[copaesthetic]

The div that is sitting atop the flash menu is a .png image and does indeed contain a transparent area. However, the part that is transparent is NOT sitting atop the menu.

[Brido]

Z-index will only work on positioned elements. IE position:relative; or position:absolute; .

Can you post a link to your site?

[noahgelman]

When you said it was "under" the flash, I thought you meant layered under. "Below" probably would have been more helpful.

Anyway. Put the ribbon div first. The flash file is blocked and clears itself so the ribbon div floats below it. So put it first and if the flash is above it still, THEN use z-index. Or if you want you can just put a negative top margin on the ribbon div and it’ll move to the top. 26px should be exact.

[Author]

Posts