Embed Flash Movie to Overlapping Float Div Layers on Top

Div layers, like HTML table, is also a container. That is you can put any web contents (texts, images, flash movies, etc...) on div layers. However div layers are much easier to control than HTML table. You can easily position the div layers and put web contents on it with less HTML codes. This css div layer tutorial show how to embed a flash movie to the top layer of overlapped div layers.

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

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

Flash movie embed to this div layer id "layer2"

Layout of Overlap Floating Div Layers

Please refer to previous div tutorial if you do not know how the div layers can be overlapped with each others.

Transparent Flash Movie Embed on Top Div Layer

The flash movie embed on the top div layer is a transparent flash movie. Therefore the web contents on the lower div layer can be seen. Click here for more information how to make transparent flash movie.

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

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

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: 250px;
width: 350px;
top: 40px;
left: 40px;
}

#layer2 {
position: absolute;
z-index: 3;
height: 384px;
width: 512px;
top: 80px;
left: 129px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}

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