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

Question

我想制作一个旋转木马并在它上面，一个div然后将这种效果叠加起来。 尝试制作EXAMPLE，但没有成功。当我添加这样的属性（absolute and relative）时，轮播的代码却没有。

我的DIV叠加=＆gt; id="faixa"

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

我尝试过类似的事情：

＆＃13;

＆＃13;

#myCarousel{
 position: absolute;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何制作？

Answer 1

为z-index设置#fixa以将此div叠加在轮播顶部。另请注意，z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定 - 您已在此处介绍过）：

#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>