Quero fazer um carrousel e por cima dele, uma div e a logo, para dar aquele efeito de estar sobreposto.
Tente fazer como neste EXEMPLO, mas sem sucesso. Quando adiciono tais propriedades (absolute e relative
) ao código do carousel o mesmo não funciona.
As imagens de fundo em slide em forma de Carousel. A div verde e a logo sobreposta no carousel.
Tentei algo como:
#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>
Como posso fazer isso?