<p>I want to embed a swf over a html page, like a floating video watching panel. I already have a swf file which will automatically adjust its size according to the browser size, and the swf file is partially transparent. I thought I can just add a div tag, make the position absolute and change z-index bigger, but that doesn't work because the swf just replaced everything that's on the page. </p>

<p>Here's what I did</p>

<pre><code>&lt;script&gt;
      swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
&lt;/script&gt;

&lt;body bgcolor="#000000"&gt;
      &lt;div id="header"&gt;&lt;/div&gt;
      &lt;div id="shell"&gt;
          things in my html
      &lt;/div&gt;
&lt;/body&gt;

#header {
    position:absolute;
    z-index:100;

}
</code></pre>

<p>Any idea? Thanks.</p>

I believe the problem with this is that the CSS doesn't work well with
```
<object />
```
tags.  The
```
swfobject.embedSWF
```
turns the
```
<div id="header"></div>
```
into an
```
<object />
```
tag with a bunch of attributes that might be effecting the CSS.  If you create a wrapper DIV around the header DIV and apply the CSS to the wrapper DIV, everything works better.  You also need to add 100% width and height in the CSS.  Here's the revised source:
```
```
<script>
    swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
    <div id="wrapper">
        <div id="header"></div>
        </div>
    <div id="shell">
        things in my html
    </div>
</body>

#wrapper {
    position:absolute;
    z-index:100;
    width:100%;
    height:100%;
}
```
```