如何在轮播上留下 div 和图像？答案

【问题标题】：How to leave a div and an image over a carousel?如何在轮播上留下 div 和图像？
【发布时间】：2016-04-25 10:58:31
【问题描述】：

我想制作一个轮播并在其上方制作一个 div，然后将其叠加起来。尝试像这样EXAMPLE，但没有成功。当我添加此类属性 (absolute and relative) 时，轮播代码不会。

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

这个怎么做？

【问题讨论】：

您在寻找这样的东西吗？ jsfiddle.net/bbb0uwk0 也请检查此以供参考。 *.com/questions/17859993/…

标签： html twitter-bootstrap css frontend

【解决方案1】：

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

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

见fiddle。

【讨论】：

【解决方案2】：

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

我有同样的问题，想在轮播顶部的 div 中放置图像。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：