Posicionamiento en CSS

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.