Mover una caja fuera de su sitio normal.
position: El tipo de posición.
top: La distancia desde el borde superior de la referencia (con position distinta de static).
z-index: El orden de apilamiento de cajas posicionadas que se solapan.
Mover una caja fuera de su sitio normal: relativa a sí misma, a un contenedor, a la ventana o pegada al hacer scroll.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El tipo de posición. relative mueve la caja sin quitarle su hueco; absolute la saca del flujo y la coloca respecto al antecesor posicionado más cercano; fixed, respecto a la ventana; sticky se queda pegada al llegar a un borde al hacer scroll.
Valores: static, relative, absolute, fixed, sticky
Esencial. La distancia desde el borde superior de la referencia (con position distinta de static). Igual con right, bottom y left.
Valores: 0, 1rem, 50%, auto
Abreviada de top, right, bottom y left. inset: 0 estira una caja absoluta hasta cubrir su contenedor.
Valores: 0, 1rem 2rem
Esencial. El orden de apilamiento de cajas posicionadas que se solapan: la de número mayor queda delante.
Valores: auto, 1, 10, -1
Crea un nuevo contexto de apilamiento: los z-index y las mezclas de dentro no se escapan.
Valores: auto, isolate
Código del tema: .contenedor { position: relative; }
Mover una caja fuera de su sitio normal: relativa a sí misma, a un contenedor, a la ventana o pegada al hacer scroll.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El tipo de posición. relative mueve la caja sin quitarle su hueco; absolute la saca del flujo y la coloca respecto al antecesor posicionado más cercano; fixed, respecto a la ventana; sticky se queda pegada al llegar a un borde al hacer scroll.
Valores: static, relative, absolute, fixed, sticky
Esencial. La distancia desde el borde superior de la referencia (con position distinta de static). Igual con right, bottom y left.
Valores: 0, 1rem, 50%, auto
Abreviada de top, right, bottom y left. inset: 0 estira una caja absoluta hasta cubrir su contenedor.
Valores: 0, 1rem 2rem
Esencial. El orden de apilamiento de cajas posicionadas que se solapan: la de número mayor queda delante.
Valores: auto, 1, 10, -1
Crea un nuevo contexto de apilamiento: los z-index y las mezclas de dentro no se escapan.
Valores: auto, isolate