将标注放置在自举轮播上 [英] Placing callouts over bootstrap carousel

问题描述

我希望在此网站 http://demo.grandpixels.com/ 上获得类似的效果， divs.callout分层放置在轮播上。

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

我正在尝试通过引导程序执行此操作。但是我的div总是放在旋转木马下面。我尝试设置标注的z-index，但是似乎不起作用。

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;
}

您可以在 http://jsfiddle.net/5ejse/

请先感谢！

推荐答案

你们都拥有。您唯一缺少的是，要使z-index起作用，必须将其应用于位置已明确设置为绝对，固定或相对的div。

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.

查看以下内容： http://jsfiddle.net / panchroma / eyccd /

代码与您开始的代码完全相同，我只是对CSS进行了调整：

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;
}

希望这会有所帮助！

这篇关于将标注放置在自举轮播上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！