iFrame in Chrome always appears above absolutely positioned divs

I have a problem on making an iframe appear below absolutely positioned containers. This problem seems to be only on Google Chrome, while in IE 9, Firefox and Safari it's fine.

Code sample

<div id="cont_1" class="containers">
    mixed content with images and text. 
</div>
<div id="cont_2" class="containers">
    mixed content with images and text. 
</div>
<div id="cont_3" class="containers">
    This one holds an iframe - An youtube video.
    <iframe width="450" height="259" sr c="http://www.youtube.com/embed/VuNIsY6JdUw" frameborder="0" allowfullscreen></iframe>
</div>
<div id="cont_4" class="containers">
    mixed content with images and text. 
</div>

All these containers (slides) share similar CSS generated with JS.

#containers {
 height: 398px;
 width: 456px;
 overflow-x: hidden;
 overflow-y: hidden;
 padding: 0px;
 margin: 0px;
 position: absolute;
 left: 184px; /* Successive ones have greater value. */
 zIndex : 150; /* Every successive div has开发者_如何学Python zIndex higher than the previous one. */
} 

Every successive div has a zIndex greater than the previous one. So 150, 152, 154, 156.

The fourth container is set to always appear higher than the other elements. It does, but not when a youtube video is inserted to the third one. The video always stays above all the elements including the fourth one, which is supposed to be at the top.

I tried the following css for iFrame, both through stylesheet and JS.

.containers iframe {
   position : relative;
   z-index : -100;
}

But this does not help with Chrome 14, though it works on all other current browsers including Safari .

In case anyone want to know whats this is used for, it is sort of like stacks, which allows to view the slides with animation. Clicking next sends the top most item back, while its edges are still visible.

Any thoughts?

---

I think what you are looking for is a parameter on the end of your iframe source. Try using http://www.youtube.com/embed/VuNIsY6JdUw?wmode=opaque

Also, your CSS is using the id selector (#) instead of the class selector (.)