layering <div> tags

[ktomasso]

I’m trying to make a layered effect on a simple splash page. The page has basically 3 components, a large <div> containing a swf file, a footer, and a button sticking out of the footer that I want to link to another page.

I have placed the button <div> first in my HTML, absolutely positioned it to the bottom right corner where I want it, and have given it an incredibly high Z-index. The effect works for the most part, but the button is extremely unstable. Once the flash animation gets to where the button is, it covers it until you move up or down with the vertical scroll bar.

Does anyone know how to make an effect like this more stable? Any other techniques I could use to create this effect?

Example code is below.

Code:

footer text.

CSS:

Code:

body {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
font-size: 62.5%;
margin: 0;
padding: 0;
}

#button {
width: 82px;
height: 109px;
position: absolute;
left: 688px;
top: 541px;
z-index:100;
}

#flash {
height: 600px;
margin: 0 auto;
z-index: 0;
}

#footer-container {
width: 100%;
height: 5.5em;
background-color:#000000;

}

#footer {
font-size: 1.2em;
margin-left: 3em;
}

#footer p {
line-height: .5em;
text-align: left;
}

[ktomasso]

Found it. It’s actually quite simple when you use SWFobject to insert Flash. Link below for the answer.

http://www.pipwerks.com/lab/swfobject/z … index.html

[Author]

Posts