如何在旋转木马上留下 div 和图像？

Question

我想做一个旋转木马，然后在上面做一个 div，然后叠加效果。尝试按此 EXAMPLE 制作，但没有成功。当我添加此类属性 (absolute and relative) 时，它不会添加轮播代码。

我的 DIV 覆盖 => id="faixa"

背景形状轮播中的幻灯片。绿色 div 和徽标叠加在旋转木马上。

我试过类似的方法：

#myCarousel{
 position: absolute;
}

#fixa{
 position: absolute;
 width: 20%;
 height: 400px;
 background: black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>

  
  <div class="carousel-inner" role="listbox">
    
    <div id="fixa">
   DIV QUE SERÁ SOBREPOSTA
    </div>
    
    <div class="item active">
      <img src="http://s3.amazonaws.savoir.com.br/cea.com.br/imagem/cadastrocqlv/imagem/cadastrocqlv-53440.jpg">
    </div>

    <div class="item">
      <img src="http://www.asia-turismo.com/imagens/asia-imagem.jpg">
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

怎么做这个？

Answer 1

为 #fixa 设置 z-index 以将此 div 堆叠在旋转木马的顶部。另请注意，z-index 仅适用于定位元素（位置：绝对、position:relative 或 position:fixed - 您已在此处介绍）：

#fixa{
 position: absolute;
 z-index: 10;
 width: 20%;
 height: 400px;
 background: black;
}

参见fiddle。

Answer 2

请注意，z-index 应用于 <div>，而不是 <img> 标签。

我有同样的问题想要将图像放置在旋转木马顶部的 div 中。

（没有足够的业力来评论 KrisD 上面的回答）

Answer 3

只需将 div 和 image 放入 carousel-caption。我来这里是为了找到相同的答案，这对我有用。

<div class=carousel-inner>
<div class=carousel-caption>
image and logo here
</div>

如何在旋转木马上留下 div 和图像？

How to leave a div and an image over a carousel?

html

css

frontend

twitter-bootstrap