Dealing with Flash’s “Z-Index”
This past week I was serving as the back-for our Front-End Engineer at a training in our company and one of the topics was dealing with Absolute and Relative Positioned Elements and one of the attendees asked me about working with Flash and how Flash always tried to get on top of all the content, well there is a simple solution and is given to us by Adobe themselves and it’s basically just setting a parameter in our movie and presto, it will work like a charm. Let’s see how this is done:
The HTML
testing oh my
gosh
3 times a charm
The CSS
#wrapper {
width:780px;
margin:0 auto;
border:1px solid blue;
overflow:auto;
}
#wrapper #flashMovie {
float:right;
margin-top:-110px;
}
#wrapper .apDiv {
width:280px;
height:70px;
background-color:#000;
border:2px groove white;
color:#00FF00;
font-family:"Courier New", Courier, monospace;
font-size:14px;
position:relative;
top:70px;
left:150px;
margin:10px;
padding:10px;
}
#wrapper .apDiv h2 a {
color:#FFFFFF;
}
The JavaScript
As you can see we are using our favourite method of inserting flash in our page SWFOBject, if you don’t want to use JavaScript to insert the SWF in your page, Stu Nicholls’ way, however we would use SWFObject for this demonstration.
Where is the magic? The WMODE parameter set to TRANSPARENT or OPAQUE will “send” the Flash Movie below our objects and get rid of the bug. If you don’t like to mess with code, you can check Adobe’s instructions on how to do it using only their tools.
I added the famous Suckerfish Dropdown menu from ALA to demonstrate you other possible uses and scenarios where this come handy, I won’t explain the code here, just give you a reference on who can help you.
Check a live sample of 3 divs along with the suckerfish dropdown being on top of a Flash movie.
Thanks to
Post a Comment