Hola. Tengo el código que os pongo debajo. La idea es que dentro del div swiper-slide se muestre una imagen y encima de la imagen, el contenido que hay dentro del div datos-slide.
Esto funciona perfecto en todos los navegadores tanto de pc como de tablet como de movil, excepto en determinados ipad algo antiguos donde no respeta el z-index.
Alguno podría decirme como puedo solucionarlo. Gracias.
Código HTML:
Ver original<div class="swiper-slide"> <img src="ruta-de-la-imagen" class="img-fluid img-swiper"> <div class="datos-slide"> <p class="rounded" style="background-color: #000000; opacity: 0.9; color: #ffffff; font-weight: bold;"><b> <a href="#" class="text-white">Texto
</a></b> <small class="px-1 py-1" style="background-color: #000000; opacity: 0.6; color: #ffffff;">16-jul.-2018
</small>
Código CSS:
Ver original.swiper-slide {
position: relative;
overflow: hidden;
text-align: center;
font-size: 20px;
background: transparent;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
z-index: 1;
}
.datos-slide{
position: absolute;
width: 300px;
bottom: 0;
z-index: 3;
text-align: center;
/*opacity: 0.6;*/
color:#000000;
/*background-color: #000000;*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.datos-slide p, .datos-slide small{
position: relative;
z-index: 4;
}
img.img-swiper{
width: 300px;
height: 225px;
position: relative;
z-index: 2;
}