Skip to main content
Correcciones en redacción, ruido removido, formato agregado
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Z-index en carrousellcarrusel Bootstrap

Estoy tratando de colocar una imagen que pertenece a un carrousellcarrusel de bootstrap encima de otro carrousellcarrusel, es decir que quede un carrousellcarrusel posicionado despuesdespués del otro pero la imagen que contiene el segundo quede posicionada encima del primero.

Suena un poco lioso, disculparme si me explico mal, adjuntaré. Adjuntaré una imagen para que sea masmás visual.:

Para ver mejor a lo que me refiero ejecutarlo a pagina completa.

Para ver mejor a lo que me refiero ejecutarlo a página completa.

Alguien¿Alguien sabría comocómo hacerlo correctamente? actualmenteActualmente la imagen no se posiciona encima del primer carrouselcarrusel.

Gracias por vuestra ayuda!!!

Z-index en carrousell Bootstrap

Estoy tratando de colocar una imagen que pertenece a un carrousell de bootstrap encima de otro carrousell, es decir que quede un carrousell posicionado despues del otro pero la imagen que contiene el segundo quede posicionada encima del primero.

Suena un poco lioso, disculparme si me explico mal, adjuntaré una imagen para que sea mas visual.

Para ver mejor a lo que me refiero ejecutarlo a pagina completa.

Alguien sabría como hacerlo correctamente? actualmente la imagen no se posiciona encima del primer carrousel.

Gracias por vuestra ayuda!!!

Z-index en carrusel Bootstrap

Estoy tratando de colocar una imagen que pertenece a un carrusel de bootstrap encima de otro carrusel, es decir que quede un carrusel posicionado después del otro pero la imagen que contiene el segundo quede posicionada encima del primero.

Suena un poco lioso, disculparme si me explico mal. Adjuntaré una imagen para que sea más visual:

Para ver mejor a lo que me refiero ejecutarlo a página completa.

¿Alguien sabría cómo hacerlo correctamente? Actualmente la imagen no se posiciona encima del primer carrusel.

se añadieron 30 caracteres en el cuerpo
Origen Enlace
Sara11
  • 397
  • 4
  • 18

Estoy tratando de colocar una imagen que pertenece a unaun carrousell de bootstrap encima de otro carrousell, es decir que quede un carrousell posicionado despues del otro pero la imagen que contiene el segundo quede posicionada encima del primero.

Alguien sabría como hacerlo correctamente? actualmente la imagen no se posiciona encima del primer carrousel.

Gracias por vuestra ayuda!!!

Estoy tratando de colocar una imagen que pertenece a una carrousell de bootstrap encima de otro carrousell, es decir que quede un carrousell posicionado despues del otro pero la imagen que contiene el segundo quede posicionada encima del primero.

Estoy tratando de colocar una imagen que pertenece a un carrousell de bootstrap encima de otro carrousell, es decir que quede un carrousell posicionado despues del otro pero la imagen que contiene el segundo quede posicionada encima del primero.

Alguien sabría como hacerlo correctamente? actualmente la imagen no se posiciona encima del primer carrousel.

Gracias por vuestra ayuda!!!

Origen Enlace
Sara11
  • 397
  • 4
  • 18

Z-index en carrousell Bootstrap

Estoy tratando de colocar una imagen que pertenece a una carrousell de bootstrap encima de otro carrousell, es decir que quede un carrousell posicionado despues del otro pero la imagen que contiene el segundo quede posicionada encima del primero.

Suena un poco lioso, disculparme si me explico mal, adjuntaré una imagen para que sea mas visual.

introducir la descripción de la imagen aquí

Para ver mejor a lo que me refiero ejecutarlo a pagina completa.

.carousel1,
.carousel-item,
.carousel-item.active {
    height: 30rem;
    background-color: white;
}

.carousel-inner {
    height: 30rem;
}

.SlideHead1 .carousel-item.active {
    background-color: black;
}

.SlideHead2 .carousel-item.active {
    background-color: rgb(255, 255, 255);
}

h5.slide2{
    font-size: 2.5rem;
    color: rgb(255, 255, 255);
    text-align: center;
}

p.slide2 {
    font-size: 1rem;
    color: rgb(255, 255, 255);
    text-align: center;
}

h5.slide3{
    font-size: 2.5rem;
    color: rgb(0, 0, 0);
    text-align: left;
}

p.slide3 {
    font-size: 1rem;
    color: rgb(0, 0, 0);
    text-align: left;
}

img.crispi.img-fluid {
    width: 19rem;
    z-index: 99999;
    transform: translateY(-150%);
    position: absolute;
}


img.d-block.w-100.imagen-carrousel-centro{
    opacity: 0.7;
    filter: alpha(opacity=50);
}

/* carrousel inicio */

h5.slide-head {
    font-size: 2.5rem;
    color: rgb(0, 0, 0);
}

p.slide-head {
    font-size: 1rem;
    color: rgb(0, 0, 0);
}

a.slide-head {
    color: rgb(0, 0, 0);
    background-color: rgba(240, 248, 255, 0);
    border: 1px solid white;
    padding-left: 5rem;
    padding-right: 5rem;

}


a.slide-head:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.141);
    border: 1px solid white;
    padding-left: 5rem;
    padding-right: 5rem;

}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  
<!-- Slide 2 -->
    <div class="row SlideHead1">
      <div class="col-sm-12">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> -->
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">

              <div class="carousel-caption slide1  d-md-block">
                <div class="row">
                  <div class="col-sm-12">
                    <h5 class="slide2">Lorem Ipsum</h5>
                    <p class="slide2">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                    <p class="slide2">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                    <p class="slide2">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
      <h5>...</h5>
    <p>...</p>
    </div> -->
          </div>
          <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> -->
        </div>
      </div>
    </div>
    <!-- END Slide 2 -->

    <!-- Slide 3 -->
    <div class="row SlideHead2">
      <div class="col-sm-12">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> -->
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              
              <div class="carousel-caption slide2 d-md-block">
                <div class="row">
                  <div class="col-sm-6">
 <h5 class="slide3">Lorem Ipsum</h5>
                    <p class="slide3">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                    <p class="slide3">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                    <p class="slide3">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>

                  </div>
                  <div class="col-sm-6">
                    <img src="https://images.unsplash.com/photo-1657299170936-0531a116c87c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="crispi img-fluid fixed-overlay" alt="crispi">
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
      <h5>...</h5>
    <p>...</p>
    </div> -->
          </div>
          <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> -->
        </div>
      </div>
    </div>
    <!-- END Slide 3 -->