DIV over flash - absolute position problem

[me_myself]

I am placing an image over the flash. There is no other work around other than placing the div on top of the flash movie. The problem i face is, i am setting "position:absolute" - when i maximize my window on a larger screen, the image (div) is nowhere near the flash file, it is way apart. How to position the image (div) over the flash so that no matter the browser is maximized or shrinked, it stays in the same place.

Please help.

Thanks.

[Snookerman]

You can put the image inside the same div as the flash and position relative to the div.

[me_myself]

Snookerman, thanks for the reply. The problem is half the image needs to be outside the flash please see the image below.

[Snookerman]

There's no problem, here are the basics of what you need to do:

<div>
  <div id="image">Insert image here</div>
  <div id="flash">Insert flash here</div>
</div>

#image {
	background-color:#0099ff;
	height:200px;
	width:300px;
	position:fixed;
	margin-left:100px;
	z-index:2;
}
#flash {
	background-color:#ccff33;
	height:300px;
	width:600px;
	position:fixed;
	margin-top:100px;
}

[jscheuer1]

There is no fixed positioning in IE 6, and it may even behave oddly in some browsers that do support it, especially with a container that isn't positioned, try:

<div id="flashimage">
  <div id="flash">Insert flash here</div>
  <div id="image">Insert image here</div>
</div>

#flashimage {
position: relative;
height: 300px;
width: 600px;
}
#flash {
height: 300px;
width: 600px;
}
#image {
height: 200px;
width: 300px;
position: absolute;
left: 50px;
top: -100px;
}

[Snookerman]

I think your solution will put the image 100px off the page.

[jscheuer1]

I think your solution will put the image 100px off the page.

It might. It will put it 100px toward the top relative to the container (id="flashimage" division). As long as the container isn't at the top of the page though, it will work out fine.

What I think that you might not understand is that once an absolutely positioned element is placed inside a relatively positioned one, its positioning is relative to the that container, not to the page in general.

We could always ensure that it won't go off the top of the page by adding:

#flashimage {
margin-top: 100px;
position: relative;
height: 300px;
width: 600px;
}

But that may or may not be needed, and may or may not be desirable.

[Snookerman]

I see what you mean, but is it really necessary to position the outer container, or even have one? Would this work?

<div id="image">Insert image here</div>
<div id="flash">Insert flash here</div>

#image {
	height:200px;
	width:300px;
	position:relative;
	margin-left:100px;
	z-index:2;
}
#flash {
	height:300px;
	width:600px;
	position:relative;
	margin-top:-100px;
}

[jscheuer1]

The problem with using only relative positioning is that the elements so positioned still require layout space. This may be OK, even desirable in certain cases. But consider that the image in our example will require 200px of vertical layout, but visually (since we are moving it) it only appears to need 100px vertical space. What using absolute positioning does is to allow the image to take up no layout space. This then allows you to have it overlay other content on the page (not just the flash, but that too) without adding any height to the document.

Now, you try to deal with that with:

#image {
	height:200px;
	width:300px;
	position:relative;
	margin-left:100px;
	z-index:2;
}
#flash {
	height:300px;
	width:600px;
	position:relative;
	margin-top:-100px;
}

That will 'neutralize' the added 100px vertical layout space in a different way, by removing it from the flash div. However, we will still have the added 100px horizontal layout space created by the image's division's left margin. This may or may not prove problematical in relation to the rest of the markup, particularly if anything is to the immediate right of the image/flash combo.

Once you have a container to represent the layout of these two combined divisions, it is a bit easier to adjust its margins as needed to get optimal document flow.

So it really is a matter of what works out best in the overall layout.

[das326326]

This maybe the answer your looking:

First adjust the Z-index (z-index:-1; generally works)

Specify the flash window mode:

'wmode', 'opaque', or something like this:

<script type="text/javascript">
var so = new SWFObject("myFlashBanner.swf", "mymovie", "770", "150", "7", "#336699");
so.addParam("wmode", "opaque");
so.write("flashcontent");
</script>

EXPLANATION:

In Flash There are three window modes. Windowless mode allows you to take advantage of the transparent movie, absolute positioning, and layering capabilities available in the browser. They are controlled with the wmode parameter in the object tag. The default mode is available by either choosing not to specify any wmode, or by using wmode="window". We'll look briefly at the explanation of the three modes

Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance. This will cause the flash movie to play on top and ignore any Z-Order settings. It is the default so if you do not specify anything this is what you get. This why some of use have no hair left in our heads.

Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through. You can also layer items on top of movie by setting its ZOrder down in the stacking order. Opague is faster than transparent. So use this setting you do not need transparency.

Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.