1

Tengo un problema, tengo un carousel de Bootstrap que cuando hago scroll hacia abajo, este se superpone arriba del menú que tengo con position:fixed;. No sé si será que Bootstrap tiene los carousel para que estén enfrente del contenido que se está mostrando o qué, pero es un problema, y necesitaría solucionarlo. La otra que se me había ocurrido es hacer el menú completamente nuevo con BootStrap. Adjunto una imagen de como se ve.

Cómo se ve

Les adjunto mi código. (El BootStrap que estoy utilizando es el más reciente de todos v5.1.3)

<article class="row justify-content-start  align-items-center">
            
            
                        <div class="col text-center">
                            <p class="">DisCor ofrece una amplia variedad de productos. Específicamente con
                                más de 6000 artículos y más
                                de 40
                                rubros, entre los cuales, Cerrajería y Accesorios del Automotor.</p>
            
            
                            <a href="views/rubros.html" class="btnIntro">Nuestros Rubros</a>
                        </div>
            
                        <div class="col">
                            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-indicators">
                                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                                </div>
                                <div class="carousel-inner">
                                  <div class="carousel-item active">
                                    <img src="imagenes/(Frenos).jpg" class="d-block w-100" alt="...">
                                  </div>
                                  
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                  <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                  <span class="visually-hidden">Next</span>
                                </button>
                              </div>
                        </div>
            
                </article>
2
  • Esto me paso a mi en una web y le puse un z-index: -1 al carrousel. Pruebalo a ver si te funciona.
    – jbort
    Commented el 29 oct. 2021 a las 18:46
  • 1
    Está perfecto!!!! Muchas Gracias!! Deja tu respuesta abajo!!! Commented el 30 oct. 2021 a las 17:51

1 respuesta 1

1

Ponle un z-index:-1 al carrusel y en un principio se te arreglara.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.