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!

are you still working on this? – David Taiaroa Jan 24 '13 at 03:52 — David Taiaroa, Jan 24 '13 at 03:52
thanks! i found it one day later :) – Dante Jan 27 '13 at 12:56 — Dante, Jan 27 '13 at 12:56

score 6 · Accepted Answer · answered Jan 19 '13 at 16:57

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!

Placing callouts over bootstrap carousel

1 Answers1

Linked