html - 如何在旋转木马上留下一个 div 和一个图像？

Question

我想制作一个旋转木马并在其上方制作一个 div，然后赋予该效果以进行叠加。试着这样做 EXAMPLE , 但没有成功。当我添加此类属性(绝对和相对)时，轮播的代码不会。

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

背景形状轮播中的幻灯片。绿色 div 和 Logo 叠加在轮播上。

我试过类似的方法:

#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:absolute、position:relative 或 position:fixed - 您已在此处介绍):

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

参见 fiddle .