2

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.

O que desejo fazer

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?

2 Respostas 2

1

Veja se é isso que queria:

#fixa{
  height: 100%;
  width: 50%;
  background: rgba(15, 215, 115, 0.5);
  z-index: 10;
  position: absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


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

À sua div#fixa atribui um height: 100%, e continuei com o position: relative, e usei o z-index: 10, como os outros elementos não tinha em suas especificações a propriedade z-index, o que tem será o que ficará acima de todos. Deve-se ter uma atenção para que a div não sobreponha os controladores.

A transparência foi com o rgba(15, 215, 115, 0.5), em que o último parâmetro é a opacide que vai de 0 a 1. Isso poderia ser substituído por rgb(15, 215, 115) e um opacity: 0.5.

2
  • É exatamente isso, obrigado! Tinha esquecido completamente da propriedade z-index rsrs E se eu quiser colocar qualquer outra imagem e ou div por cima (Sendo mais específico, a LOGO), novamente basta navegar pelo z-indexe pronto?
    – Zkk
    21/01/2016 às 1:02
  • 1
    @Zkk. Sim, é basicamente isso. Lembrando que irá depender um pouco do position, mas no caso colocando um absolute, imagino que tudo correrá bem :) 21/01/2016 às 1:05
1

Para sobrepor arquivos utilize a propriedade css z-index:9999 onde 9999 é o valor que voce deseja, quanto maior mais acima ele se posicionará.

2
  • Dando uma pesquisada, fiquei sabendo que colocar o z-index:999 é uma má prática, pois esta não é uma forma consciente de posicionamento.
    – Zkk
    6/04/2016 às 18:35
  • Não tinha conhecimento disso, mas legal show de bola, o numero 9999 era para ter uma base mesmo não para usar exatamente isso.
    – Fbor
    6/04/2016 às 19:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .