1 00:00:01,580 --> 00:00:22,920 Vale, pues ahora vamos a ver cómo superposicionar diferentes elementos. Esto va a ser muy sencillo. Como siempre, nos vamos a ir a brackets y aquí lo que vamos a hacer es borrar todo el contenido y todos los estilos hasta ahí. 2 00:00:22,920 --> 00:00:27,359 y aquí borramos hasta ahí 3 00:00:27,359 --> 00:00:27,579 vale 4 00:00:27,579 --> 00:00:32,609 perdón, antes de borrarlo 5 00:00:32,609 --> 00:00:34,090 no seáis bestias y 6 00:00:34,090 --> 00:00:36,770 guardar el archivo como y lo vamos a 7 00:00:36,770 --> 00:00:38,409 llamar superposición 8 00:00:38,409 --> 00:00:40,929 punto html 9 00:00:40,929 --> 00:00:41,789 vale 10 00:00:41,789 --> 00:00:44,890 y ahora una vez que ya si que lo tenéis guardado si que lo podéis borrar 11 00:00:44,890 --> 00:00:48,390 eso es 12 00:00:48,390 --> 00:00:48,969 vale 13 00:00:48,969 --> 00:00:51,030 vamos a llamar a esto 14 00:00:51,030 --> 00:00:52,929 superposición 15 00:00:52,929 --> 00:00:54,850 con css 16 00:00:54,850 --> 00:00:58,170 y lo que vamos a hacer 17 00:00:58,170 --> 00:01:00,170 vamos a crear primero el contenido 18 00:01:00,170 --> 00:01:02,369 vamos a poner un título h1 19 00:01:02,369 --> 00:01:04,709 que sea superposición 20 00:01:04,709 --> 00:01:05,950 con css 21 00:01:05,950 --> 00:01:07,629 y nos vamos a crear 22 00:01:07,629 --> 00:01:10,049 tres cajas dip 23 00:01:10,049 --> 00:01:10,969 tres contenedores 24 00:01:10,969 --> 00:01:14,010 con el campo id vacío 25 00:01:14,010 --> 00:01:15,510 para eso 26 00:01:15,510 --> 00:01:17,650 aquí el atajo emet 27 00:01:17,650 --> 00:01:19,969 que va a ser dip 28 00:01:19,969 --> 00:01:23,290 ponemos id entre dentro 29 00:01:23,290 --> 00:01:28,250 porque vamos a dejar el hueco de id vacío para que lo rellene yo manualmente 30 00:01:28,250 --> 00:01:31,269 y por 3, porque vamos a poner 3 cajitas 31 00:01:31,269 --> 00:01:37,450 pues entonces div id por 3 tabulador 32 00:01:37,450 --> 00:01:44,469 y como vamos a poner cajitas de colores pues van a ser verde, rojo y azul 33 00:01:44,469 --> 00:01:50,950 pues vamos a empezar a darle estilo a esto 34 00:01:50,950 --> 00:01:53,250 nos vamos a poner 35 00:01:53,250 --> 00:01:54,909 y lo primero que vamos a darle estilo son 36 00:01:54,909 --> 00:01:56,629 a todos los dip en general, ¿vale? 37 00:01:56,670 --> 00:01:58,489 por eso ponemos la etiqueta dip 38 00:01:58,489 --> 00:02:00,609 le vamos a dar una anchura 39 00:02:00,609 --> 00:02:03,890 que va a ser de 400 píxeles 40 00:02:03,890 --> 00:02:05,310 le vamos a dar 41 00:02:05,310 --> 00:02:06,349 una altura 42 00:02:06,349 --> 00:02:09,310 que van a ser de 180 píxeles 43 00:02:09,310 --> 00:02:10,949 le vamos a poner 44 00:02:10,949 --> 00:02:13,210 una posición que va a ser relativa 45 00:02:13,210 --> 00:02:15,550 ¿vale? para que los elementos se posicionen 46 00:02:15,550 --> 00:02:17,610 de forma relativa respecto de la 47 00:02:17,610 --> 00:02:19,569 de la página 48 00:02:19,569 --> 00:02:40,050 ¿Vale? Y ahora vamos a modificar cada elemento de forma individual, ¿vale? Vamos a modificar primero el verde, que como es verde, pues le vamos a dar un color de fondo verde, ¿vale? 008800, ¿vale? Que es un color verde así oscurillo. 49 00:02:40,050 --> 00:02:45,580 Y lo que vamos a hacer es posicionarlo, ¿vale? 50 00:02:50,060 --> 00:03:02,000 Ponemos una posición desde la parte izquierda de 139 píxeles y desde arriba de 144 píxeles, ¿vale? 51 00:03:02,979 --> 00:03:07,819 Vamos a hacer algo similar para el rojo, le vamos a dar un color de fondo. 52 00:03:07,819 --> 00:03:25,120 En este caso, DFF0000, lo vamos a poner desde la izquierda a 180 píxeles y desde arriba a, y sin ponerle valor de arriba, ¿vale? 53 00:03:25,120 --> 00:03:38,139 Y por último vamos a hacer el azul, que le vamos a dar un color de fondo que sea 0000FF, ¿vale? 54 00:03:38,580 --> 00:03:48,400 Desde la izquierda lo vamos a posicionar a 215 píxeles y desde abajo a 153 píxeles, ¿vale? 55 00:03:48,400 --> 00:04:08,360 ¿Vale? Entonces, si os dais cuenta, vemos cómo van saliendo superpuestas unas cajas respecto de las otras, ¿vale? ¿Qué ocurre con esto? Pues que yo puede ser que decida que la caja que yo quiero que salga adelante sea la verde en lugar de la roja, o la roja en lugar del resto, ¿vale? 56 00:04:08,360 --> 00:04:15,460 Entonces, para eso se utiliza una propiedad que se llama z-índex, ¿vale? 57 00:04:16,240 --> 00:04:19,480 Z-índex, lo voy a poner justo aquí arriba, ¿vale? 58 00:04:24,810 --> 00:04:32,930 Para hacer superposición, z-índex. 59 00:04:33,709 --> 00:04:40,449 Cuanto mayor sea el valor del z-índex, más arriba se verá, ¿vale? 60 00:04:40,949 --> 00:04:57,170 Entonces, fijaros, voy a ponerle z-index a todos los elementos, ¿vale? Voy a ponerle a este un z-index de 1 y lo voy a copiar y lo voy a poner en todos, ¿vale? 61 00:04:59,009 --> 00:05:07,670 Tal que así, ¿vale? Ahora mismo todos tienen el mismo z-index. Si os dais cuenta, al ponerle a todos el mismo z-index no ha habido ningún cambio, ¿vale? 62 00:05:07,670 --> 00:05:24,730 Si yo ahora le pongo al verde un z-index de 5, fijaros que el verde pasa a estar delante, ¿vale? Luego estaría el azul y luego el rojo. Si yo ahora al rojo le pongo un 2, fijaros que el rojo pasa a estar delante del azul. 63 00:05:24,730 --> 00:05:29,769 Y si yo incluso al rojo le pongo ahora un 10, pasa a estar delante del verde, ¿vale? 64 00:05:30,290 --> 00:05:35,930 ¿Qué pasa? Que tal y como está la disposición de estas cajas, no llego a saber si el verde está delante del azul o no, ¿vale? 65 00:05:36,209 --> 00:05:44,149 Pero si yo ahora de nuevo al azul le doy un 15, pues fijaros que el azul pasa a estar delante, ¿vale? 66 00:05:44,790 --> 00:05:54,529 Entonces ya digo, propiedad Z index para moverse o para jugar con ese superposicionamiento de los diferentes elementos, ¿vale? 67 00:05:54,730 --> 00:06:00,029 Pues como digo, esto también lo utilizaremos bastante. 68 00:06:01,029 --> 00:06:01,589 ¡Ánimo!