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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

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

Try to do as in this EXAMPLE , but to no avail. When I add such properties ( absolute e relative ) to the carousel code it does not work.

ThebackgroundimagesslideintoCarouselshape.Thegreendivandthelogosuperimposedonthecarousel.

Itriedsomethinglike:

#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><divclass="item">
      <img src="http://www.asia-turismo.com/imagens/asia-imagem.jpg"></div></div></div><scriptsrc="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 this?

css css3 front-end

asked by anonymous 19.01.2016 / 20:43

2 answers

1

To overlay files, use the css z-index:9999 property where 9999 is the value you want, the higher the higher it will be.

19.01.2016 / 20:50

Left outer Join does not have Null values [duplicate] align contents of a div in the center of the screen

score 1 · Accepted Answer

See if that's 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><scriptsrc="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><divclass="item">
      <img src="http://www.asia-turismo.com/imagens/asia-imagem.jpg"></div></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Your div#fixa assigns a height: 100% , and I continued with position: relative , and I used z-index: 10 , as the other elements did not have the z-index property, what you have will be what will be above all. You should be aware that div does not override drivers.

The transparency was with 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 opacity: 0.5 .