WEBVTT

00:00:00.000 --> 00:00:02.233
Ahora vamos a aprender cómo usar CSS

00:00:02.233 --> 00:00:04.233
para mover realmente las cosas.

00:00:04.233 --> 00:00:06.004
No sólo poner unas junto a otras.

00:00:06.004 --> 00:00:07.637
Sino en realidad poner las cosas,

00:00:07.637 --> 00:00:09.029
encima de otras.

00:00:09.029 --> 00:00:11.611
Aquí tenemos una página web,

00:00:11.611 --> 00:00:16.041
con algunos encabezados, imágenes y

00:00:16.041 --> 00:00:18.069
algunos párrafos aquí abajo.

00:00:18.069 --> 00:00:20.155
Y en este momento todo está acomodado

00:00:20.155 --> 00:00:22.177
con la estrategia de posicionamiento por defecto,

00:00:22.177 --> 00:00:24.212
que usa el navegador

00:00:24.212 --> 00:00:26.959
y que llamamos posicionamiento normal o estático.

00:00:26.959 --> 00:00:29.388
Eso significa que los elementos en línea,

00:00:29.388 --> 00:00:30.699
como las imágenes,

00:00:30.699 --> 00:00:32.297
se ponen de izquierda a derecha.

00:00:32.297 --> 00:00:33.800
Y los elementos en bloque,

00:00:33.800 --> 00:00:35.490
como encabezados y párrafos,

00:00:35.490 --> 00:00:37.565
se acomodan de arriba a abajo.

00:00:37.565 --> 00:00:39.915
Podemos cambiar esa estrategia de posicionamiento,

00:00:39.915 --> 00:00:42.670
usando la propiedad "position" de CSS.

00:00:42.670 --> 00:00:45.621
Vamos a intentarlo con la imagen del paisaje.

00:00:45.621 --> 00:00:49.657
Tecleamos "position:" y luego

00:00:49.657 --> 00:00:51.446
ponemos el valor "relative".

00:00:51.446 --> 00:00:53.406
La estrategia de posición relativa,

00:00:53.406 --> 00:00:55.407
significa que lo pone donde lo haríamos normalmente

00:00:55.407 --> 00:00:57.791
pero compensando un poco.

00:00:57.791 --> 00:01:00.156
Ahora, para decirle al navegador, qué cantidad

00:01:00.156 --> 00:01:01.501
queremos compensar,

00:01:01.501 --> 00:01:03.140
necesitamos usar una combinación de

00:01:03.140 --> 00:01:05.179
cuatro nuevas propiedades de CSS:


00:01:05.179 --> 00:01:07.425
"Top" (arriba), "bottom" (abajo), "left" (izquierda) y "right" (derecha).

00:01:07.425 --> 00:01:09.441
Por ejemplo, queremos que la imagen esté

00:01:09.441 --> 00:01:11.875
veinte pixeles abajo.

00:01:11.875 --> 00:01:13.626
Escribimos "top: 20 px"

00:01:13.626 --> 00:01:15.222
Y aquí 10 pixeles,

00:01:15.222 --> 00:01:16.675
y aquí escribimos "left: 10px".

00:01:16.675 --> 00:01:18.668
Esto se ve muy ordenado,

00:01:18.668 --> 00:01:20.893
pero en realidad no está tan ordenado,

00:01:20.893 --> 00:01:23.472
Quiero mostrarles una manera mejor.

00:01:23.472 --> 00:01:25.077
Posicionamiento absoluto.

00:01:25.077 --> 00:01:26.583
Podemos usarlo para sacar un elemento

00:01:26.583 --> 00:01:28.525
completamente del flujo normal,

00:01:28.525 --> 00:01:30.613
y ponerlo en cualquier parte de la pantalla.

00:01:30.613 --> 00:01:33.764
Para hacer eso, voy a cambiar "relative" por "absolute"

00:01:33.764 --> 00:01:36.975
en el paisaje, y voy a dejar "top" y "left" como está.

00:01:36.975 --> 00:01:39.088
Y pueden ver que el paisaje ahora está

00:01:39.088 --> 00:01:41.679
ocultando nuestras imágenes y el encabezado que dice "Dance Party".

00:01:41.679 --> 00:01:42.772
Vamos a arreglar eso ahora,

00:01:42.772 --> 00:01:44.791
empezando por "Winston",

00:01:44.791 --> 00:01:48.456
así que vamos a añadir una regla para "Winston"

00:01:48.456 --> 00:01:52.096
para darle a "Winston" una posición absoluta.

00:01:52.096 --> 00:01:54.302
Y luego vamos a decir

00:01:54.302 --> 00:01:56.110
40 pixeles.

00:01:56.110 --> 00:01:58.394
Oh, vamos a escribir arriba 40 pixeles,

00:01:58.394 --> 00:02:00.055
y luego izquierda 50 pixeles,

00:02:00.055 --> 00:02:02.204
Ok, eso se ve bien.

00:02:02.204 --> 00:02:05.672
Y "Hopper" está realmente ansioso por estar arriba también.

00:02:05.672 --> 00:02:11.695
Así que "Hopper" también necesita una posición absoluta.

00:02:11.695 --> 00:02:15.218
Y vamos a escribir "top: 30px",

00:02:15.218 --> 00:02:17.814
y "left: 60 px".

00:02:17.814 --> 00:02:19.613
Ok, mi objetivo es

00:02:19.613 --> 00:02:21.216
hacer que "Hopper" parezca que

00:02:21.216 --> 00:02:23.743
está bailando enfrente de "Winston".

00:02:23.743 --> 00:02:26.640
Pero en este momento no parece que lo esté haciendo,

00:02:26.640 --> 00:02:28.244
porque "Winston" se está dibujando

00:02:28.244 --> 00:02:30.358
encima de "Hopper".

00:02:30.358 --> 00:02:31.948
Para arreglar esto,

00:02:31.948 --> 00:02:33.619
podría cambiar el orden de

00:02:33.619 --> 00:02:36.586
las etiquetas de las imágenes en el HTML,

00:02:36.586 --> 00:02:38.699
pero una mejor manera de hacerlo es

00:02:38.699 --> 00:02:42.257
usar la propiedad "z index" de CSS.

00:02:42.257 --> 00:02:43.939
Podemos usar esta propiedad para decirle al navegador

00:02:43.939 --> 00:02:45.236
el orden exacto en que debe dibujar

00:02:45.236 --> 00:02:48.077
los elementos, al darles diferentes índices.

00:02:48.077 --> 00:02:50.691
Así que empezaré con el paisaje

00:02:50.691 --> 00:02:53.268
y voy a asignarle un "z index" de 1.

00:02:53.268 --> 00:02:56.345
Y sigue "Winston" con 2,

00:02:56.345 --> 00:02:59.054
y "Hopper" con 3.

00:02:59.054 --> 00:03:00.081
¡Muy bien!

00:03:00.081 --> 00:03:02.641
Ahora "Hopper" está bailando enfrente de "Winston",

00:03:02.641 --> 00:03:05.268
aunque no le guste, pero lo tiene que hacer.

00:03:05.268 --> 00:03:07.801
Pero todavía tenemos encabezados

00:03:07.801 --> 00:03:09.991
y poemas que están ocultos.

00:03:09.991 --> 00:03:13.050
Así que tratemos de...

00:03:13.050 --> 00:03:16.886
tal vez quiero que "Dance party" quede por arriba de todo,

00:03:16.886 --> 00:03:19.928
así que voy a asignarle posición absoluta.

00:03:19.928 --> 00:03:21.757
Y "z index: 4".

00:03:21.757 --> 00:03:24.427
Ok, se ve bien, podríamos poner "left: 10px"

00:03:24.427 --> 00:03:26.942
y moverlo un poco, tal vez un poco más.

00:03:26.942 --> 00:03:28.518
Muy bien, se ve bien.

00:03:28.518 --> 00:03:30.088
Ahora para la letra de las canciones,

00:03:30.088 --> 00:03:32.963
en realidad quiero que se desplieguen debajo de todo.

00:03:32.963 --> 00:03:35.525
Así que para eso voy a cambiar

00:03:35.525 --> 00:03:38.219
la posición a "relative" y luego

00:03:38.219 --> 00:03:40.688
ponemos "top: ", que debe ser...

00:03:40.688 --> 00:03:45.154
tan alto como la imagen, podría ser 220 pixeles.

00:03:45.154 --> 00:03:48.425
Muy bien, en realidad esto se ve bien.

00:03:48.425 --> 00:03:51.909
Ya tenemos una loca fiesta de baile.

00:03:51.909 --> 00:03:53.822
Ahora, si pausas nuestra guía paso a paso,

00:03:53.822 --> 00:03:55.770
y tratas de desplazar la página

00:03:55.770 --> 00:03:59.211
verás que todo se desplaza al mismo tiempo.

00:03:59.211 --> 00:04:00.989
Y lo importante es

00:04:00.989 --> 00:04:02.616
que el posicionamiento absoluto es relativo

00:04:02.616 --> 00:04:04.053
a la parte superior de la página web.

00:04:04.053 --> 00:04:06.017
Así que si desplazas hacia abajo la página web,

00:04:06.040 --> 00:04:07.733
las cosas que están 10 pixeles abajo de

00:04:07.733 --> 00:04:10.550
la parte superior se van a salir de la pantalla,

00:04:10.550 --> 00:04:11.919
porque estás yendo más lejos

00:04:11.919 --> 00:04:14.640
de la parte superior de la página web.

00:04:14.640 --> 00:04:17.127
Otra opción es el posicionamiento fijo.

00:04:17.127 --> 00:04:18.765
Que en realidad hace que parezca que las cosas

00:04:18.765 --> 00:04:20.354
no se mueven.

00:04:20.354 --> 00:04:22.097
Y si quieres probar,

00:04:22.097 --> 00:04:23.051
sólo tenemos que cambiar

00:04:23.051 --> 00:04:25.693
"h1" de "absolute" a "fixed".

00:04:25.693 --> 00:04:29.073
Y ahora, haz una pausa y trata de desplazar la pantalla

00:04:29.073 --> 00:04:33.675
y verás que "Dance party" se queda en el mismo lugar,

00:04:33.678 --> 00:04:35.667
porque ahora, en realidad

00:04:35.667 --> 00:04:39.216
es relativo a la parte superior de la pantalla,

00:04:39.216 --> 00:04:40.852
de la ventana.

00:04:40.852 --> 00:04:43.917
Ok, hemos usado

00:04:43.917 --> 00:04:45.941
tres propiedades diferentes de posicionamiento

00:04:45.941 --> 00:04:47.697
para hacer cosas geniales.

00:04:47.697 --> 00:04:49.069
En realidad ¿cuándo debemos usar

00:04:49.069 --> 00:04:51.071
posicionamiento absoluto o fijo?

00:04:51.071 --> 00:04:53.109
Bueno, podríamos usarlos

00:04:53.109 --> 00:04:54.183
para hacer un juego,

00:04:54.183 --> 00:04:55.693
como yo lo hice aquí,

00:04:55.693 --> 00:04:57.219
porque querrías desplegar todas

00:04:57.219 --> 00:04:58.864
las partes de tu escena en el navegador.

00:04:58.864 --> 00:05:00.229
Pero también podrías usarlos

00:05:00.229 --> 00:05:01.634
en páginas web normales

00:05:01.634 --> 00:05:03.026
como Khan Academy.

00:05:03.026 --> 00:05:04.383
Usamos posicionamiento absoluto para los modelos

00:05:04.383 --> 00:05:06.279
que aparecen en el centro de la página.

00:05:06.279 --> 00:05:07.650
Y usamos posicionamiento fijo

00:05:07.650 --> 00:05:08.751
en el buscador de nuestra página

00:05:08.751 --> 00:05:11.813
para que siempre esté visible aunque desplaces la página.

00:05:11.813 --> 00:05:14.232
Probablemente no uses el posicionamiento

00:05:14.232 --> 00:05:15.431
en cada página web,

00:05:15.431 --> 00:05:16.704
pero cuando lo uses

00:05:16.704 --> 00:05:18.967
estarás muy feliz de que exista.