How to leave a div and an image over a Carousel?

Question

I want to run a paddle and over it, a div and the logo, to give that effect of being superimposed.

Try to do like this EXAMPLE, but without success. When I add such properties (absolute e relative) the Carousel code does not work.

The Carousel-shaped slide background images. The green div and logo superimposed on the Carousel.

I tried something like:

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

How can I do that?

Answer 1

To overwrite files use the css property z-index:9999 where 9999 is the value Voce wants, the higher up it will be.

Answer 2

See if this is what you wanted:

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

To his div#fixa assigns a height: 100%, and continued with the position: relative, and used the z-index: 10, as the other elements did not have in their specifications the property z-index, what you have will be what will be above all. It should be noted that the div do not override the controllers.

The transparency was with the rgba(15, 215, 115, 0.5), where the last parameter is the opacide that goes from 0 to 1. This could be replaced by rgb(15, 215, 115) and a opacity: 0.5.