Using Layers (z-index) without leaving empty space

Question

Hello,

I want to put <div> above a flash object.

I managed to do so but the problem is that now I have an empty space where the div was.

I gave the div position relative and left & top values.

Is it possible to move objects with z-index without leaving a mark somwhere in the page(taking space and leave blank area)??

Thanks

Answer 1

When you are using positon:relative; you are not taking the element out of the flow, you are only moving it from it's original position. You want to use position:aboslute; to take the element out of the flow.

When using absolute positioning, the coordinates are relative to the first parent element that is a layer. You might want to apply position:relative; (but no offset) to the parent element to make it a layer, so that the coordinates are relative to the parent, not the body.

Answer 2

Thanks Guffa - it worked!!!

Answer 3

This may not be a problem with your HTML/CSS, but rather something strange with Flash, where it always tries to be on-top.

From this message, the solution is to use pass the wmode="transparent" parameter to the flash file:

<param name="wmode" value="transparent" />
<EMBED src="swf.swf" quality=best bgcolor=#FFFFFF wmode="transparent" 
WIDTH="550" ...