-
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.
