Placing callouts over bootstrap carousel

Question

i would like an effect like on this site http://demo.grandpixels.com/ where the divs .callout are layered over the carousel.

I'm trying to do this in bootstrap. But my divs always go under the carousel. I've tried setting z-index of the callouts but that doesn't seem to work.

.callouts {
    display: block;
margin-top: -150px;
z-index: 999999999999999;
}

You can check the basics at http://jsfiddle.net/5ejse/

Thanks in advance!

Answer 1

You all but have it. The only thing you are missing is that for z-index to work, it has to be applied to a div whose position has been explicitly set to absolute, fixed or relative.

Check this out: http://jsfiddle.net/panchroma/eyccd/

The code is exactly the same as what you had started, I just tweaked this CSS:

.callouts {
position:relative;  /* <======= added this */
display:block;
margin-top: -150px;
z-index: 999999999999999;
}

Hope this helps!