Embed Flash Movie to Overlapping Div Layers Float on Bottom

This HTML css div layer tutorial is same as the previous tutorial. The only difference is that the flash movie is embed on a div layer that float on the bottom stack.

Contents for div layer id "outerWrap" start here.......

Flash Movie embed to this div layer id "layer1" start here...

Contents for div layer id "layer2"start here...

Transparent Flash Movie Embed on Top Div Layer

We also use swfobject to embed the flash movie to div layer "layer 1". Please check the source codes of this HTML web page.

In order that the area of div layer "layer 1" can be seen, a thin black border is added to "layer 1".

CSS Div Layers Codes

#outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 500px;
width: 650px;
}

#layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 384px;
width: 512px;
top: 40px;
left: 40px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

#layer2 {
position: absolute;
z-index: 3;
height: 220px;
width: 340px;
top: 259px;
left: 299px;
background-color: #FC0;
}

HTML CSS Tutorial contents: How to embed flash movie on div layer overlapped on bottom.