CSS:

Positioning
It’s all about
THE FLOW…
STATIC, RELATIVE ,
ABSOLUTE
Ejemplo guiado: Positioning
1. Crea esto en la web

#ee3e64
Ancho: 200px
Altura: 200px
Position: Static *
#

Al body:
margin: 0
#b7d84b padding: 0

* Posición por defecto de los contenedores

2. Cambia el “position a relative” a todos los
contenedores
● ¿Qué cambió?
● Tip: ahora puedes mover este elemento
usando top, left, right, bottom

¡Experimenta!
3. Logra que se vea así
4. Ahora logra que se vea así, pero
únicamente modificando el HTML (Tip:
explora meter el contenedor azul dentro del
rojo)
5. Ahora vamos a explorar la posición
“Absolute” para lograr que se vea así (Tip:
debes ajustar el HTML y el CSS)

left: 0 right: 0
top: 0 top: 0

Position: Absolute
¡a todos!

left: 0 right: 0
bottom: 0 bottom: 0
 DATO IMPORTANTE:

¡El Absolute NO respeta el flow!

(el relative si)
6. Logra que se vea así utilizando la posición
absoluta para el azul

¿Te diste cuenta que no mantiene el

flow? ¡cambia el azul a relative y
verás!
 OTRO DATO IMPORTANTE:

¡Tanto el Absolute como el Relative crean un

eje de coordenadas para los contenedores
hijos!
7. Intenta hacer esto

Tip:
● Static
○ Relative (ó Absolute)
■ Absolute

Tip:
● Relative (ó
Absolute)
○ Static
■ Absolute

¡Recuerda el
Anidado!
Positioning
Static Relative Absolute
¿Se puede No Sí Sí
mover con left,
right, top?
¿Respeta el Sí Sí No
flow?
Punto de n/a posición inicial body * (a
referencia menos que el
padre tenga
posición
relativa o
absoluta)
Crea un eje de No Sí Sí
Ejercicio: Nuestras coders
Ejercicio: La cancha