Foros del Web » Creando para Internet » CSS »

z-index en determinados ipad

Estas en el tema de z-index en determinados ipad en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 02/08/2018, 00:24
 
Fecha de Ingreso: mayo-2009
Mensajes: 733
Antigüedad: 9 años, 2 meses
Puntos: 6
z-index en determinados ipad

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
  1. <div class="swiper-slide">
  2.     <img src="ruta-de-la-imagen" class="img-fluid img-swiper">
  3.     <div class="datos-slide">
  4.          <p class="rounded" style="background-color: #000000; opacity: 0.9; color: #ffffff; font-weight: bold;"><b>
  5.                   <a href="#" class="text-white">Texto</a></b>
  6.          </p>
  7.          <small class="px-1 py-1" style="background-color: #000000; opacity: 0.6; color: #ffffff;">16-jul.-2018</small>
  8.   </div>
  9. </div>

Código CSS:
Ver original
  1. .swiper-slide {
  2.       position: relative;
  3.       overflow: hidden;
  4.       text-align: center;
  5.       font-size: 20px;
  6.       background: transparent;
  7.       /* Center slide text vertically */
  8.       display: -webkit-box;
  9.       display: -ms-flexbox;
  10.       display: -webkit-flex;
  11.       display: flex;
  12.       -webkit-box-pack: center;
  13.       -ms-flex-pack: center;
  14.       -webkit-justify-content: center;
  15.       justify-content: center;
  16.       -webkit-box-align: center;
  17.       -ms-flex-align: center;
  18.       -webkit-align-items: center;
  19.       align-items: center;
  20.       z-index: 1;
  21.     }
  22.    
  23.   .datos-slide{
  24.     position: absolute;
  25.     width: 300px;
  26.     bottom: 0;
  27.     z-index: 3;
  28.     text-align: center;
  29.     /*opacity: 0.6;*/
  30.     color:#000000;
  31.     /*background-color: #000000;*/
  32.     -webkit-transform: translate3d(0,0,0);
  33.     -moz-transform: translate3d(0,0,0);
  34.     -o-transform: translate3d(0,0,0);
  35.     transform: translate3d(0,0,0);
  36.   }
  37.  
  38.   .datos-slide p, .datos-slide small{
  39.     position: relative;
  40.     z-index: 4;
  41.   }
  42.  
  43.   img.img-swiper{
  44.     width: 300px;
  45.     height: 225px;
  46.     position: relative;
  47.     z-index: 2;
  48.   }

Última edición por AitorLopez; 02/08/2018 a las 00:47



La zona horaria es GMT -6. Ahora son las 18:48.