0

He introducido un slider sacado de la página w3schools el problema es que cuando hago scroll hacia abajo el slider queda sobrepuesto sobre la cabecera como muestro en la foto, hay alguna forma de que se quede en una posición fija sin sobreponerse a nada? introducir la descripción de la imagen aquí

este es el código del html del slider donde coloco las fotos y los botones y los puntos.

<div class="slideshow-container">

    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="/html/MadrePatria.jpeg" style="width:100%" alt="hola holitaaa">
      <div class="text">Caption holaaaa</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="/html/wuhan-coronavirus-meme-8-186x300.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="img3.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>

  <!-- The dots/circles -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span> 
  </div>

y este es el código css que no he tocado:

/* Slideshow container */
.slideshow-container {
  max-width: 400px;
  position: relative;
  margin: auto;
}

supongo que esta es la clase que debería editar "slideshow container", sin embargo al poner position: absolute el slider se descentra y queda así: introducir la descripción de la imagen aquí

5
  • Has probado con position:absolute?
    – hdmq
    Commented el 20 feb. 2020 a las 17:38
  • Deberias poner el codigo asi podemos ver donde esta el problema
    – Agustin G.
    Commented el 20 feb. 2020 a las 17:42
  • @hdmq si pongo position:absolute el slider se descentra, paso código
    – juanchi
    Commented el 20 feb. 2020 a las 17:56
  • @Mani ya está editado
    – juanchi
    Commented el 20 feb. 2020 a las 18:08
  • podes poner el html del nav tambien?
    – Agustin G.
    Commented el 20 feb. 2020 a las 18:13

1 respuesta 1

1

Podrías utilizar la propiedad z-index a tu navbar, esta propiedad indica el z-order de un elemento y sus descendientes. Cuando varios elementos se superponen, z-order determina cuales cubren a otros.

Un elemento con mayor z-index generalmente cubre a otro menor.

Cada caja tiene una posición en tres dimensiones adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

#miNavBar{
   z-index:1
}

.slideshow-container{
   z-index:0
}

Te dejo un link para que lo pruebes:

https://www.w3schools.com/cssref/playit.asp?filename=playcss_z-index&preval=2

Saludos.

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.