[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.23,Default,,0000,0000,0000,,Ahora vamos a aprender cómo usar CSS
Dialogue: 0,0:00:02.23,0:00:04.23,Default,,0000,0000,0000,,para mover realmente las cosas.
Dialogue: 0,0:00:04.23,0:00:06.00,Default,,0000,0000,0000,,No sólo poner unas junto a otras.
Dialogue: 0,0:00:06.00,0:00:07.64,Default,,0000,0000,0000,,Sino en realidad poner las cosas,
Dialogue: 0,0:00:07.64,0:00:09.03,Default,,0000,0000,0000,,encima de otras.
Dialogue: 0,0:00:09.03,0:00:11.61,Default,,0000,0000,0000,,Aquí tenemos una página web,
Dialogue: 0,0:00:11.61,0:00:16.04,Default,,0000,0000,0000,,con algunos encabezados, imágenes y
Dialogue: 0,0:00:16.04,0:00:18.07,Default,,0000,0000,0000,,algunos párrafos aquí abajo.
Dialogue: 0,0:00:18.07,0:00:20.16,Default,,0000,0000,0000,,Y en este momento todo está acomodado
Dialogue: 0,0:00:20.16,0:00:22.18,Default,,0000,0000,0000,,con la estrategia de posicionamiento por defecto,
Dialogue: 0,0:00:22.18,0:00:24.21,Default,,0000,0000,0000,,que usa el navegador
Dialogue: 0,0:00:24.21,0:00:26.96,Default,,0000,0000,0000,,y que llamamos posicionamiento normal o estático.
Dialogue: 0,0:00:26.96,0:00:29.39,Default,,0000,0000,0000,,Eso significa que los elementos en línea,
Dialogue: 0,0:00:29.39,0:00:30.70,Default,,0000,0000,0000,,como las imágenes,
Dialogue: 0,0:00:30.70,0:00:32.30,Default,,0000,0000,0000,,se ponen de izquierda a derecha.
Dialogue: 0,0:00:32.30,0:00:33.80,Default,,0000,0000,0000,,Y los elementos en bloque,
Dialogue: 0,0:00:33.80,0:00:35.49,Default,,0000,0000,0000,,como encabezados y párrafos,
Dialogue: 0,0:00:35.49,0:00:37.56,Default,,0000,0000,0000,,se acomodan de arriba a abajo.
Dialogue: 0,0:00:37.56,0:00:39.92,Default,,0000,0000,0000,,Podemos cambiar esa estrategia de posicionamiento,
Dialogue: 0,0:00:39.92,0:00:42.67,Default,,0000,0000,0000,,usando la propiedad "position" de CSS.
Dialogue: 0,0:00:42.67,0:00:45.62,Default,,0000,0000,0000,,Vamos a intentarlo con la imagen del paisaje.
Dialogue: 0,0:00:45.62,0:00:49.66,Default,,0000,0000,0000,,Tecleamos "position:" y luego
Dialogue: 0,0:00:49.66,0:00:51.45,Default,,0000,0000,0000,,ponemos el valor "relative".
Dialogue: 0,0:00:51.45,0:00:53.41,Default,,0000,0000,0000,,La estrategia de posición relativa,
Dialogue: 0,0:00:53.41,0:00:55.41,Default,,0000,0000,0000,,significa que lo pone donde lo haríamos normalmente
Dialogue: 0,0:00:55.41,0:00:57.79,Default,,0000,0000,0000,,pero compensando un poco.
Dialogue: 0,0:00:57.79,0:01:00.16,Default,,0000,0000,0000,,Ahora, para decirle al navegador, qué cantidad
Dialogue: 0,0:01:00.16,0:01:01.50,Default,,0000,0000,0000,,queremos compensar,
Dialogue: 0,0:01:01.50,0:01:03.14,Default,,0000,0000,0000,,necesitamos usar una combinación de
Dialogue: 0,0:01:03.14,0:01:05.18,Default,,0000,0000,0000,,cuatro nuevas propiedades de CSS:\N
Dialogue: 0,0:01:05.18,0:01:07.42,Default,,0000,0000,0000,,"Top" (arriba), "bottom" (abajo), "left" (izquierda) y "right" (derecha).
Dialogue: 0,0:01:07.42,0:01:09.44,Default,,0000,0000,0000,,Por ejemplo, queremos que la imagen esté
Dialogue: 0,0:01:09.44,0:01:11.88,Default,,0000,0000,0000,,veinte pixeles abajo.
Dialogue: 0,0:01:11.88,0:01:13.63,Default,,0000,0000,0000,,Escribimos "top: 20 px"
Dialogue: 0,0:01:13.63,0:01:15.22,Default,,0000,0000,0000,,Y aquí 10 pixeles,
Dialogue: 0,0:01:15.22,0:01:16.68,Default,,0000,0000,0000,,y aquí escribimos "left: 10px".
Dialogue: 0,0:01:16.68,0:01:18.67,Default,,0000,0000,0000,,Esto se ve muy ordenado,
Dialogue: 0,0:01:18.67,0:01:20.89,Default,,0000,0000,0000,,pero en realidad no está tan ordenado,
Dialogue: 0,0:01:20.89,0:01:23.47,Default,,0000,0000,0000,,Quiero mostrarles una manera mejor.
Dialogue: 0,0:01:23.47,0:01:25.08,Default,,0000,0000,0000,,Posicionamiento absoluto.
Dialogue: 0,0:01:25.08,0:01:26.58,Default,,0000,0000,0000,,Podemos usarlo para sacar un elemento
Dialogue: 0,0:01:26.58,0:01:28.52,Default,,0000,0000,0000,,completamente del flujo normal,
Dialogue: 0,0:01:28.52,0:01:30.61,Default,,0000,0000,0000,,y ponerlo en cualquier parte de la pantalla.
Dialogue: 0,0:01:30.61,0:01:33.76,Default,,0000,0000,0000,,Para hacer eso, voy a cambiar "relative" por "absolute"
Dialogue: 0,0:01:33.76,0:01:36.98,Default,,0000,0000,0000,,en el paisaje, y voy a dejar "top" y "left" como está.
Dialogue: 0,0:01:36.98,0:01:39.09,Default,,0000,0000,0000,,Y pueden ver que el paisaje ahora está
Dialogue: 0,0:01:39.09,0:01:41.68,Default,,0000,0000,0000,,ocultando nuestras imágenes y el encabezado que dice "Dance Party".
Dialogue: 0,0:01:41.68,0:01:42.77,Default,,0000,0000,0000,,Vamos a arreglar eso ahora,
Dialogue: 0,0:01:42.77,0:01:44.79,Default,,0000,0000,0000,,empezando por "Winston",
Dialogue: 0,0:01:44.79,0:01:48.46,Default,,0000,0000,0000,,así que vamos a añadir una regla para "Winston"
Dialogue: 0,0:01:48.46,0:01:52.10,Default,,0000,0000,0000,,para darle a "Winston" una posición absoluta.
Dialogue: 0,0:01:52.10,0:01:54.30,Default,,0000,0000,0000,,Y luego vamos a decir
Dialogue: 0,0:01:54.30,0:01:56.11,Default,,0000,0000,0000,,40 pixeles.
Dialogue: 0,0:01:56.11,0:01:58.39,Default,,0000,0000,0000,,Oh, vamos a escribir arriba 40 pixeles,
Dialogue: 0,0:01:58.39,0:02:00.06,Default,,0000,0000,0000,,y luego izquierda 50 pixeles,
Dialogue: 0,0:02:00.06,0:02:02.20,Default,,0000,0000,0000,,Ok, eso se ve bien.
Dialogue: 0,0:02:02.20,0:02:05.67,Default,,0000,0000,0000,,Y "Hopper" está realmente ansioso por estar arriba también.
Dialogue: 0,0:02:05.67,0:02:11.70,Default,,0000,0000,0000,,Así que "Hopper" también necesita una posición absoluta.
Dialogue: 0,0:02:11.70,0:02:15.22,Default,,0000,0000,0000,,Y vamos a escribir "top: 30px",
Dialogue: 0,0:02:15.22,0:02:17.81,Default,,0000,0000,0000,,y "left: 60 px".
Dialogue: 0,0:02:17.81,0:02:19.61,Default,,0000,0000,0000,,Ok, mi objetivo es
Dialogue: 0,0:02:19.61,0:02:21.22,Default,,0000,0000,0000,,hacer que "Hopper" parezca que
Dialogue: 0,0:02:21.22,0:02:23.74,Default,,0000,0000,0000,,está bailando enfrente de "Winston".
Dialogue: 0,0:02:23.74,0:02:26.64,Default,,0000,0000,0000,,Pero en este momento no parece que lo esté haciendo,
Dialogue: 0,0:02:26.64,0:02:28.24,Default,,0000,0000,0000,,porque "Winston" se está dibujando
Dialogue: 0,0:02:28.24,0:02:30.36,Default,,0000,0000,0000,,encima de "Hopper".
Dialogue: 0,0:02:30.36,0:02:31.95,Default,,0000,0000,0000,,Para arreglar esto,
Dialogue: 0,0:02:31.95,0:02:33.62,Default,,0000,0000,0000,,podría cambiar el orden de
Dialogue: 0,0:02:33.62,0:02:36.59,Default,,0000,0000,0000,,las etiquetas de las imágenes en el HTML,
Dialogue: 0,0:02:36.59,0:02:38.70,Default,,0000,0000,0000,,pero una mejor manera de hacerlo es
Dialogue: 0,0:02:38.70,0:02:42.26,Default,,0000,0000,0000,,usar la propiedad "z index" de CSS.
Dialogue: 0,0:02:42.26,0:02:43.94,Default,,0000,0000,0000,,Podemos usar esta propiedad para decirle al navegador
Dialogue: 0,0:02:43.94,0:02:45.24,Default,,0000,0000,0000,,el orden exacto en que debe dibujar
Dialogue: 0,0:02:45.24,0:02:48.08,Default,,0000,0000,0000,,los elementos, al darles diferentes índices.
Dialogue: 0,0:02:48.08,0:02:50.69,Default,,0000,0000,0000,,Así que empezaré con el paisaje
Dialogue: 0,0:02:50.69,0:02:53.27,Default,,0000,0000,0000,,y voy a asignarle un "z index" de 1.
Dialogue: 0,0:02:53.27,0:02:56.34,Default,,0000,0000,0000,,Y sigue "Winston" con 2,
Dialogue: 0,0:02:56.34,0:02:59.05,Default,,0000,0000,0000,,y "Hopper" con 3.
Dialogue: 0,0:02:59.05,0:03:00.08,Default,,0000,0000,0000,,¡Muy bien!
Dialogue: 0,0:03:00.08,0:03:02.64,Default,,0000,0000,0000,,Ahora "Hopper" está bailando enfrente de "Winston",
Dialogue: 0,0:03:02.64,0:03:05.27,Default,,0000,0000,0000,,aunque no le guste, pero lo tiene que hacer.
Dialogue: 0,0:03:05.27,0:03:07.80,Default,,0000,0000,0000,,Pero todavía tenemos encabezados
Dialogue: 0,0:03:07.80,0:03:09.99,Default,,0000,0000,0000,,y poemas que están ocultos.
Dialogue: 0,0:03:09.99,0:03:13.05,Default,,0000,0000,0000,,Así que tratemos de...
Dialogue: 0,0:03:13.05,0:03:16.89,Default,,0000,0000,0000,,tal vez quiero que "Dance party" quede por arriba de todo,
Dialogue: 0,0:03:16.89,0:03:19.93,Default,,0000,0000,0000,,así que voy a asignarle posición absoluta.
Dialogue: 0,0:03:19.93,0:03:21.76,Default,,0000,0000,0000,,Y "z index: 4".
Dialogue: 0,0:03:21.76,0:03:24.43,Default,,0000,0000,0000,,Ok, se ve bien, podríamos poner "left: 10px"
Dialogue: 0,0:03:24.43,0:03:26.94,Default,,0000,0000,0000,,y moverlo un poco, tal vez un poco más.
Dialogue: 0,0:03:26.94,0:03:28.52,Default,,0000,0000,0000,,Muy bien, se ve bien.
Dialogue: 0,0:03:28.52,0:03:30.09,Default,,0000,0000,0000,,Ahora para la letra de las canciones,
Dialogue: 0,0:03:30.09,0:03:32.96,Default,,0000,0000,0000,,en realidad quiero que se desplieguen debajo de todo.
Dialogue: 0,0:03:32.96,0:03:35.52,Default,,0000,0000,0000,,Así que para eso voy a cambiar
Dialogue: 0,0:03:35.52,0:03:38.22,Default,,0000,0000,0000,,la posición a "relative" y luego
Dialogue: 0,0:03:38.22,0:03:40.69,Default,,0000,0000,0000,,ponemos "top: ", que debe ser...
Dialogue: 0,0:03:40.69,0:03:45.15,Default,,0000,0000,0000,,tan alto como la imagen, podría ser 220 pixeles.
Dialogue: 0,0:03:45.15,0:03:48.42,Default,,0000,0000,0000,,Muy bien, en realidad esto se ve bien.
Dialogue: 0,0:03:48.42,0:03:51.91,Default,,0000,0000,0000,,Ya tenemos una loca fiesta de baile.
Dialogue: 0,0:03:51.91,0:03:53.82,Default,,0000,0000,0000,,Ahora, si pausas nuestra guía paso a paso,
Dialogue: 0,0:03:53.82,0:03:55.77,Default,,0000,0000,0000,,y tratas de desplazar la página
Dialogue: 0,0:03:55.77,0:03:59.21,Default,,0000,0000,0000,,verás que todo se desplaza al mismo tiempo.
Dialogue: 0,0:03:59.21,0:04:00.99,Default,,0000,0000,0000,,Y lo importante es
Dialogue: 0,0:04:00.99,0:04:02.62,Default,,0000,0000,0000,,que el posicionamiento absoluto es relativo
Dialogue: 0,0:04:02.62,0:04:04.05,Default,,0000,0000,0000,,a la parte superior de la página web.
Dialogue: 0,0:04:04.05,0:04:06.02,Default,,0000,0000,0000,,Así que si desplazas hacia abajo la página web,
Dialogue: 0,0:04:06.04,0:04:07.73,Default,,0000,0000,0000,,las cosas que están 10 pixeles abajo de
Dialogue: 0,0:04:07.73,0:04:10.55,Default,,0000,0000,0000,,la parte superior se van a salir de la pantalla,
Dialogue: 0,0:04:10.55,0:04:11.92,Default,,0000,0000,0000,,porque estás yendo más lejos
Dialogue: 0,0:04:11.92,0:04:14.64,Default,,0000,0000,0000,,de la parte superior de la página web.
Dialogue: 0,0:04:14.64,0:04:17.13,Default,,0000,0000,0000,,Otra opción es el posicionamiento fijo.
Dialogue: 0,0:04:17.13,0:04:18.76,Default,,0000,0000,0000,,Que en realidad hace que parezca que las cosas
Dialogue: 0,0:04:18.76,0:04:20.35,Default,,0000,0000,0000,,no se mueven.
Dialogue: 0,0:04:20.35,0:04:22.10,Default,,0000,0000,0000,,Y si quieres probar,
Dialogue: 0,0:04:22.10,0:04:23.05,Default,,0000,0000,0000,,sólo tenemos que cambiar
Dialogue: 0,0:04:23.05,0:04:25.69,Default,,0000,0000,0000,,"h1" de "absolute" a "fixed".
Dialogue: 0,0:04:25.69,0:04:29.07,Default,,0000,0000,0000,,Y ahora, haz una pausa y trata de desplazar la pantalla
Dialogue: 0,0:04:29.07,0:04:33.68,Default,,0000,0000,0000,,y verás que "Dance party" se queda en el mismo lugar,
Dialogue: 0,0:04:33.68,0:04:35.67,Default,,0000,0000,0000,,porque ahora, en realidad
Dialogue: 0,0:04:35.67,0:04:39.22,Default,,0000,0000,0000,,es relativo a la parte superior de la pantalla,
Dialogue: 0,0:04:39.22,0:04:40.85,Default,,0000,0000,0000,,de la ventana.
Dialogue: 0,0:04:40.85,0:04:43.92,Default,,0000,0000,0000,,Ok, hemos usado
Dialogue: 0,0:04:43.92,0:04:45.94,Default,,0000,0000,0000,,tres propiedades diferentes de posicionamiento
Dialogue: 0,0:04:45.94,0:04:47.70,Default,,0000,0000,0000,,para hacer cosas geniales.
Dialogue: 0,0:04:47.70,0:04:49.07,Default,,0000,0000,0000,,En realidad ¿cuándo debemos usar
Dialogue: 0,0:04:49.07,0:04:51.07,Default,,0000,0000,0000,,posicionamiento absoluto o fijo?
Dialogue: 0,0:04:51.07,0:04:53.11,Default,,0000,0000,0000,,Bueno, podríamos usarlos
Dialogue: 0,0:04:53.11,0:04:54.18,Default,,0000,0000,0000,,para hacer un juego,
Dialogue: 0,0:04:54.18,0:04:55.69,Default,,0000,0000,0000,,como yo lo hice aquí,
Dialogue: 0,0:04:55.69,0:04:57.22,Default,,0000,0000,0000,,porque querrías desplegar todas
Dialogue: 0,0:04:57.22,0:04:58.86,Default,,0000,0000,0000,,las partes de tu escena en el navegador.
Dialogue: 0,0:04:58.86,0:05:00.23,Default,,0000,0000,0000,,Pero también podrías usarlos
Dialogue: 0,0:05:00.23,0:05:01.63,Default,,0000,0000,0000,,en páginas web normales
Dialogue: 0,0:05:01.63,0:05:03.03,Default,,0000,0000,0000,,como Khan Academy.
Dialogue: 0,0:05:03.03,0:05:04.38,Default,,0000,0000,0000,,Usamos posicionamiento absoluto para los modelos
Dialogue: 0,0:05:04.38,0:05:06.28,Default,,0000,0000,0000,,que aparecen en el centro de la página.
Dialogue: 0,0:05:06.28,0:05:07.65,Default,,0000,0000,0000,,Y usamos posicionamiento fijo
Dialogue: 0,0:05:07.65,0:05:08.75,Default,,0000,0000,0000,,en el buscador de nuestra página
Dialogue: 0,0:05:08.75,0:05:11.81,Default,,0000,0000,0000,,para que siempre esté visible aunque desplaces la página.
Dialogue: 0,0:05:11.81,0:05:14.23,Default,,0000,0000,0000,,Probablemente no uses el posicionamiento
Dialogue: 0,0:05:14.23,0:05:15.43,Default,,0000,0000,0000,,en cada página web,
Dialogue: 0,0:05:15.43,0:05:16.70,Default,,0000,0000,0000,,pero cuando lo uses
Dialogue: 0,0:05:16.70,0:05:18.97,Default,,0000,0000,0000,,estarás muy feliz de que exista.