Ahora vamos a aprender cómo usar CSS
para mover realmente las cosas.
No sólo poner unas junto a otras.
Sino en realidad poner las cosas,
encima de otras.
Aquí tenemos una página web,
con algunos encabezados, imágenes y
algunos párrafos aquí abajo.
Y en este momento todo está acomodado
con la estrategia de posicionamiento por defecto,
que usa el navegador
y que llamamos posicionamiento normal o estático.
Eso significa que los elementos en línea,
como las imágenes,
se ponen de izquierda a derecha.
Y los elementos en bloque,
como encabezados y párrafos,
se acomodan de arriba a abajo.
Podemos cambiar esa estrategia de posicionamiento,
usando la propiedad "position" de CSS.
Vamos a intentarlo con la imagen del paisaje.
Tecleamos "position:" y luego
ponemos el valor "relative".
La estrategia de posición relativa,
significa que lo pone donde lo haríamos normalmente
pero compensando un poco.
Ahora, para decirle al navegador, qué cantidad
queremos compensar,
necesitamos usar una combinación de
cuatro nuevas propiedades de CSS:
"Top" (arriba), "bottom" (abajo), "left" (izquierda) y "right" (derecha).
Por ejemplo, queremos que la imagen esté
veinte pixeles abajo.
Escribimos "top: 20 px"
Y aquí 10 pixeles,
y aquí escribimos "left: 10px".
Esto se ve muy ordenado,
pero en realidad no está tan ordenado,
Quiero mostrarles una manera mejor.
Posicionamiento absoluto.
Podemos usarlo para sacar un elemento
completamente del flujo normal,
y ponerlo en cualquier parte de la pantalla.
Para hacer eso, voy a cambiar "relative" por "absolute"
en el paisaje, y voy a dejar "top" y "left" como está.
Y pueden ver que el paisaje ahora está
ocultando nuestras imágenes y el encabezado que dice "Dance Party".
Vamos a arreglar eso ahora,
empezando por "Winston",
así que vamos a añadir una regla para "Winston"
para darle a "Winston" una posición absoluta.
Y luego vamos a decir
40 pixeles.
Oh, vamos a escribir arriba 40 pixeles,
y luego izquierda 50 pixeles,
Ok, eso se ve bien.
Y "Hopper" está realmente ansioso por estar arriba también.
Así que "Hopper" también necesita una posición absoluta.
Y vamos a escribir "top: 30px",
y "left: 60 px".
Ok, mi objetivo es
hacer que "Hopper" parezca que
está bailando enfrente de "Winston".
Pero en este momento no parece que lo esté haciendo,
porque "Winston" se está dibujando
encima de "Hopper".
Para arreglar esto,
podría cambiar el orden de
las etiquetas de las imágenes en el HTML,
pero una mejor manera de hacerlo es
usar la propiedad "z index" de CSS.
Podemos usar esta propiedad para decirle al navegador
el orden exacto en que debe dibujar
los elementos, al darles diferentes índices.
Así que empezaré con el paisaje
y voy a asignarle un "z index" de 1.
Y sigue "Winston" con 2,
y "Hopper" con 3.
¡Muy bien!
Ahora "Hopper" está bailando enfrente de "Winston",
aunque no le guste, pero lo tiene que hacer.
Pero todavía tenemos encabezados
y poemas que están ocultos.
Así que tratemos de...
tal vez quiero que "Dance party" quede por arriba de todo,
así que voy a asignarle posición absoluta.
Y "z index: 4".
Ok, se ve bien, podríamos poner "left: 10px"
y moverlo un poco, tal vez un poco más.
Muy bien, se ve bien.
Ahora para la letra de las canciones,
en realidad quiero que se desplieguen debajo de todo.
Así que para eso voy a cambiar
la posición a "relative" y luego
ponemos "top: ", que debe ser...
tan alto como la imagen, podría ser 220 pixeles.
Muy bien, en realidad esto se ve bien.
Ya tenemos una loca fiesta de baile.
Ahora, si pausas nuestra guía paso a paso,
y tratas de desplazar la página
verás que todo se desplaza al mismo tiempo.
Y lo importante es
que el posicionamiento absoluto es relativo
a la parte superior de la página web.
Así que si desplazas hacia abajo la página web,
las cosas que están 10 pixeles abajo de
la parte superior se van a salir de la pantalla,
porque estás yendo más lejos
de la parte superior de la página web.
Otra opción es el posicionamiento fijo.
Que en realidad hace que parezca que las cosas
no se mueven.
Y si quieres probar,
sólo tenemos que cambiar
"h1" de "absolute" a "fixed".
Y ahora, haz una pausa y trata de desplazar la pantalla
y verás que "Dance party" se queda en el mismo lugar,
porque ahora, en realidad
es relativo a la parte superior de la pantalla,
de la ventana.
Ok, hemos usado
tres propiedades diferentes de posicionamiento
para hacer cosas geniales.
En realidad ¿cuándo debemos usar
posicionamiento absoluto o fijo?
Bueno, podríamos usarlos
para hacer un juego,
como yo lo hice aquí,
porque querrías desplegar todas
las partes de tu escena en el navegador.
Pero también podrías usarlos
en páginas web normales
como Khan Academy.
Usamos posicionamiento absoluto para los modelos
que aparecen en el centro de la página.
Y usamos posicionamiento fijo
en el buscador de nuestra página
para que siempre esté visible aunque desplaces la página.
Probablemente no uses el posicionamiento
en cada página web,
pero cuando lo uses
estarás muy feliz de que exista.