1
00:00:00,000 --> 00:00:02,233
Ahora vamos a aprender cómo usar CSS

2
00:00:02,233 --> 00:00:04,233
para mover realmente las cosas.

3
00:00:04,233 --> 00:00:06,004
No sólo poner unas junto a otras.

4
00:00:06,004 --> 00:00:07,637
Sino en realidad poner las cosas,

5
00:00:07,637 --> 00:00:09,029
encima de otras.

6
00:00:09,029 --> 00:00:11,611
Aquí tenemos una página web,

7
00:00:11,611 --> 00:00:16,041
con algunos encabezados, imágenes y

8
00:00:16,041 --> 00:00:18,069
algunos párrafos aquí abajo.

9
00:00:18,069 --> 00:00:20,155
Y en este momento todo está acomodado

10
00:00:20,155 --> 00:00:22,177
con la estrategia de posicionamiento por defecto,

11
00:00:22,177 --> 00:00:24,212
que usa el navegador

12
00:00:24,212 --> 00:00:26,959
y que llamamos posicionamiento normal o estático.

13
00:00:26,959 --> 00:00:29,388
Eso significa que los elementos en línea,

14
00:00:29,388 --> 00:00:30,699
como las imágenes,

15
00:00:30,699 --> 00:00:32,297
se ponen de izquierda a derecha.

16
00:00:32,297 --> 00:00:33,800
Y los elementos en bloque,

17
00:00:33,800 --> 00:00:35,490
como encabezados y párrafos,

18
00:00:35,490 --> 00:00:37,565
se acomodan de arriba a abajo.

19
00:00:37,565 --> 00:00:39,915
Podemos cambiar esa estrategia de posicionamiento,

20
00:00:39,915 --> 00:00:42,670
usando la propiedad "position" de CSS.

21
00:00:42,670 --> 00:00:45,621
Vamos a intentarlo con la imagen del paisaje.

22
00:00:45,621 --> 00:00:49,657
Tecleamos "position:" y luego

23
00:00:49,657 --> 00:00:51,446
ponemos el valor "relative".

24
00:00:51,446 --> 00:00:53,406
La estrategia de posición relativa,

25
00:00:53,406 --> 00:00:55,407
significa que lo pone donde lo haríamos normalmente

26
00:00:55,407 --> 00:00:57,791
pero compensando un poco.

27
00:00:57,791 --> 00:01:00,156
Ahora, para decirle al navegador, qué cantidad

28
00:01:00,156 --> 00:01:01,501
queremos compensar,

29
00:01:01,501 --> 00:01:03,140
necesitamos usar una combinación de

30
00:01:03,140 --> 00:01:05,179
cuatro nuevas propiedades de CSS:


31
00:01:05,179 --> 00:01:07,425
"Top" (arriba), "bottom" (abajo), "left" (izquierda) y "right" (derecha).

32
00:01:07,425 --> 00:01:09,441
Por ejemplo, queremos que la imagen esté

33
00:01:09,441 --> 00:01:11,875
veinte pixeles abajo.

34
00:01:11,875 --> 00:01:13,626
Escribimos "top: 20 px"

35
00:01:13,626 --> 00:01:15,222
Y aquí 10 pixeles,

36
00:01:15,222 --> 00:01:16,675
y aquí escribimos "left: 10px".

37
00:01:16,675 --> 00:01:18,668
Esto se ve muy ordenado,

38
00:01:18,668 --> 00:01:20,893
pero en realidad no está tan ordenado,

39
00:01:20,893 --> 00:01:23,472
Quiero mostrarles una manera mejor.

40
00:01:23,472 --> 00:01:25,077
Posicionamiento absoluto.

41
00:01:25,077 --> 00:01:26,583
Podemos usarlo para sacar un elemento

42
00:01:26,583 --> 00:01:28,525
completamente del flujo normal,

43
00:01:28,525 --> 00:01:30,613
y ponerlo en cualquier parte de la pantalla.

44
00:01:30,613 --> 00:01:33,764
Para hacer eso, voy a cambiar "relative" por "absolute"

45
00:01:33,764 --> 00:01:36,975
en el paisaje, y voy a dejar "top" y "left" como está.

46
00:01:36,975 --> 00:01:39,088
Y pueden ver que el paisaje ahora está

47
00:01:39,088 --> 00:01:41,679
ocultando nuestras imágenes y el encabezado que dice "Dance Party".

48
00:01:41,679 --> 00:01:42,772
Vamos a arreglar eso ahora,

49
00:01:42,772 --> 00:01:44,791
empezando por "Winston",

50
00:01:44,791 --> 00:01:48,456
así que vamos a añadir una regla para "Winston"

51
00:01:48,456 --> 00:01:52,096
para darle a "Winston" una posición absoluta.

52
00:01:52,096 --> 00:01:54,302
Y luego vamos a decir

53
00:01:54,302 --> 00:01:56,110
40 pixeles.

54
00:01:56,110 --> 00:01:58,394
Oh, vamos a escribir arriba 40 pixeles,

55
00:01:58,394 --> 00:02:00,055
y luego izquierda 50 pixeles,

56
00:02:00,055 --> 00:02:02,204
Ok, eso se ve bien.

57
00:02:02,204 --> 00:02:05,672
Y "Hopper" está realmente ansioso por estar arriba también.

58
00:02:05,672 --> 00:02:11,695
Así que "Hopper" también necesita una posición absoluta.

59
00:02:11,695 --> 00:02:15,218
Y vamos a escribir "top: 30px",

60
00:02:15,218 --> 00:02:17,814
y "left: 60 px".

61
00:02:17,814 --> 00:02:19,613
Ok, mi objetivo es

62
00:02:19,613 --> 00:02:21,216
hacer que "Hopper" parezca que

63
00:02:21,216 --> 00:02:23,743
está bailando enfrente de "Winston".

64
00:02:23,743 --> 00:02:26,640
Pero en este momento no parece que lo esté haciendo,

65
00:02:26,640 --> 00:02:28,244
porque "Winston" se está dibujando

66
00:02:28,244 --> 00:02:30,358
encima de "Hopper".

67
00:02:30,358 --> 00:02:31,948
Para arreglar esto,

68
00:02:31,948 --> 00:02:33,619
podría cambiar el orden de

69
00:02:33,619 --> 00:02:36,586
las etiquetas de las imágenes en el HTML,

70
00:02:36,586 --> 00:02:38,699
pero una mejor manera de hacerlo es

71
00:02:38,699 --> 00:02:42,257
usar la propiedad "z index" de CSS.

72
00:02:42,257 --> 00:02:43,939
Podemos usar esta propiedad para decirle al navegador

73
00:02:43,939 --> 00:02:45,236
el orden exacto en que debe dibujar

74
00:02:45,236 --> 00:02:48,077
los elementos, al darles diferentes índices.

75
00:02:48,077 --> 00:02:50,691
Así que empezaré con el paisaje

76
00:02:50,691 --> 00:02:53,268
y voy a asignarle un "z index" de 1.

77
00:02:53,268 --> 00:02:56,345
Y sigue "Winston" con 2,

78
00:02:56,345 --> 00:02:59,054
y "Hopper" con 3.

79
00:02:59,054 --> 00:03:00,081
¡Muy bien!

80
00:03:00,081 --> 00:03:02,641
Ahora "Hopper" está bailando enfrente de "Winston",

81
00:03:02,641 --> 00:03:05,268
aunque no le guste, pero lo tiene que hacer.

82
00:03:05,268 --> 00:03:07,801
Pero todavía tenemos encabezados

83
00:03:07,801 --> 00:03:09,991
y poemas que están ocultos.

84
00:03:09,991 --> 00:03:13,050
Así que tratemos de...

85
00:03:13,050 --> 00:03:16,886
tal vez quiero que "Dance party" quede por arriba de todo,

86
00:03:16,886 --> 00:03:19,928
así que voy a asignarle posición absoluta.

87
00:03:19,928 --> 00:03:21,757
Y "z index: 4".

88
00:03:21,757 --> 00:03:24,427
Ok, se ve bien, podríamos poner "left: 10px"

89
00:03:24,427 --> 00:03:26,942
y moverlo un poco, tal vez un poco más.

90
00:03:26,942 --> 00:03:28,518
Muy bien, se ve bien.

91
00:03:28,518 --> 00:03:30,088
Ahora para la letra de las canciones,

92
00:03:30,088 --> 00:03:32,963
en realidad quiero que se desplieguen debajo de todo.

93
00:03:32,963 --> 00:03:35,525
Así que para eso voy a cambiar

94
00:03:35,525 --> 00:03:38,219
la posición a "relative" y luego

95
00:03:38,219 --> 00:03:40,688
ponemos "top: ", que debe ser...

96
00:03:40,688 --> 00:03:45,154
tan alto como la imagen, podría ser 220 pixeles.

97
00:03:45,154 --> 00:03:48,425
Muy bien, en realidad esto se ve bien.

98
00:03:48,425 --> 00:03:51,909
Ya tenemos una loca fiesta de baile.

99
00:03:51,909 --> 00:03:53,822
Ahora, si pausas nuestra guía paso a paso,

100
00:03:53,822 --> 00:03:55,770
y tratas de desplazar la página

101
00:03:55,770 --> 00:03:59,211
verás que todo se desplaza al mismo tiempo.

102
00:03:59,211 --> 00:04:00,989
Y lo importante es

103
00:04:00,989 --> 00:04:02,616
que el posicionamiento absoluto es relativo

104
00:04:02,616 --> 00:04:04,053
a la parte superior de la página web.

105
00:04:04,053 --> 00:04:06,017
Así que si desplazas hacia abajo la página web,

106
00:04:06,040 --> 00:04:07,733
las cosas que están 10 pixeles abajo de

107
00:04:07,733 --> 00:04:10,550
la parte superior se van a salir de la pantalla,

108
00:04:10,550 --> 00:04:11,919
porque estás yendo más lejos

109
00:04:11,919 --> 00:04:14,640
de la parte superior de la página web.

110
00:04:14,640 --> 00:04:17,127
Otra opción es el posicionamiento fijo.

111
00:04:17,127 --> 00:04:18,765
Que en realidad hace que parezca que las cosas

112
00:04:18,765 --> 00:04:20,354
no se mueven.

113
00:04:20,354 --> 00:04:22,097
Y si quieres probar,

114
00:04:22,097 --> 00:04:23,051
sólo tenemos que cambiar

115
00:04:23,051 --> 00:04:25,693
"h1" de "absolute" a "fixed".

116
00:04:25,693 --> 00:04:29,073
Y ahora, haz una pausa y trata de desplazar la pantalla

117
00:04:29,073 --> 00:04:33,675
y verás que "Dance party" se queda en el mismo lugar,

118
00:04:33,678 --> 00:04:35,667
porque ahora, en realidad

119
00:04:35,667 --> 00:04:39,216
es relativo a la parte superior de la pantalla,

120
00:04:39,216 --> 00:04:40,852
de la ventana.

121
00:04:40,852 --> 00:04:43,917
Ok, hemos usado

122
00:04:43,917 --> 00:04:45,941
tres propiedades diferentes de posicionamiento

123
00:04:45,941 --> 00:04:47,697
para hacer cosas geniales.

124
00:04:47,697 --> 00:04:49,069
En realidad ¿cuándo debemos usar

125
00:04:49,069 --> 00:04:51,071
posicionamiento absoluto o fijo?

126
00:04:51,071 --> 00:04:53,109
Bueno, podríamos usarlos

127
00:04:53,109 --> 00:04:54,183
para hacer un juego,

128
00:04:54,183 --> 00:04:55,693
como yo lo hice aquí,

129
00:04:55,693 --> 00:04:57,219
porque querrías desplegar todas

130
00:04:57,219 --> 00:04:58,864
las partes de tu escena en el navegador.

131
00:04:58,864 --> 00:05:00,229
Pero también podrías usarlos

132
00:05:00,229 --> 00:05:01,634
en páginas web normales

133
00:05:01,634 --> 00:05:03,026
como Khan Academy.

134
00:05:03,026 --> 00:05:04,383
Usamos posicionamiento absoluto para los modelos

135
00:05:04,383 --> 00:05:06,279
que aparecen en el centro de la página.

136
00:05:06,279 --> 00:05:07,650
Y usamos posicionamiento fijo

137
00:05:07,650 --> 00:05:08,751
en el buscador de nuestra página

138
00:05:08,751 --> 00:05:11,813
para que siempre esté visible aunque desplaces la página.

139
00:05:11,813 --> 00:05:14,232
Probablemente no uses el posicionamiento

140
00:05:14,232 --> 00:05:15,431
en cada página web,

141
00:05:15,431 --> 00:05:16,704
pero cuando lo uses

142
00:05:16,704 --> 00:05:18,967
estarás muy feliz de que exista.