Temario posicionamiento css
- ¿Que es el posicionamiento en css?
- Posicionamiento static
- Posicionamiento relative
- Posicionamiento absolute
- Posicionamiento fijo (fixed)
- Posicionamiento sticky o pegajoso
- Propiedad z-index
El posicionamiento en css tiene que ver con la propiedad FLOAT y POSITION que nos van a permitir modificar la posición natural de cualquier elemento del documento HTML.
El navegador coloca cada elemento teniendo en cuenta el orden en el que aparece en el documento y su tipo de visualización dependiendo si es un elemento de línea o de bloque.
Con la propiedad FLOAT y POSITION podemos modificar este comportamiento.
La propiedad positions tiene cinco posibles valores:
Cuando activamos cualquiera de los cuatro valores (relative, absolute, fixed o stciky) diferentes a static (que es el valor por default) de la propiedad position, para mover los elementos se activan las siguientes cinco propiedades:
NOTA: Estos cinco valores no funcionan con el valor de static.
Las propiedades top y left siempre van a tener preferencia por sobre las propiedades bottom y right respectivamente.
◀️ Volver a pagina principal 🔼 Ir a inicio posicionamiento cssStatic es el valor por defecto y significa que el elemento respeta el flujo del elemento HTML, por lo que no se puede mover o posicionar.
Todos los elementos en el flujo del documento por defecto tienen position static.
El posicionamiento relativo (relative) hace que el elemento conserve sus dimensiones y posición original en el flujo del documento. Si se mueve toma como referencia su posición original.
Cuando se aplica la propieded position: relative en apariencia no
pasa nada, visualmente queda en su ligar pero internamente si cambia.
Las coordenadas de un position relative estan en relación a su posición inicial.
Si aplicamos a un elemento la propiedad top: 50px; este se va a
alejar 50px del margen superior (top), es decir, se mueve hacia abajo (bottom).
Si aplicamos a un elemento la propiedad left: 50px; este se va a
alejar 50px del margen izquierdo (left), es decir se mueve hacia la derecha
(right)
El elemento pierde sus dimensiones y posisión original en el flujo del documento. Si se mueve puede tomar como referencia 2 elementos:
Las coordenadas en un position absolute estan dadas en relación al ansestro o padre mas cercano que este posicionado con relative, absolute o fixed.
El elemento pierde sus dimensiones y posición original en ele flujo del documento. Si se mueve toma como referencia el documento HTML y queda fijo en la posición, cuando el scroll se mueva el elemento no lo hará, que da fijo.
El elemento se queda pegado cuando se hace scroll, no se mueve.
las coordenadas siempre seran relativas a la ventana del navegador o viewport.
Es una combinación de posicionamiento relative y fixed, para este posicionamiento las propiedades de top, lef, bottom y right no mueven el elemento, sino que sirven como punto de referencia de donde tiene que cambiar el comportamiento del elemento, mientras no lleguen a ese valor el elemento se comporta como relative, cuando llega a ese valor se convierte en fixed.
Para que este comportamiento funcione el elemento sticky debe ser hijo directo del body o su elemento contenedor debe tener dimensiones definidas (width, heigh) establecidas por nosotros y sólo séra sticky dentro de las dimensiones de su contenedor padre.
La propiedad z-index nos va a permitir controlar la profundidad de los elementos posicionados, su valor por defecto es auto, acepta números positivos, negativos y cero.
A mayor valor el elemento esta más al frente, a menor valor más al fondo
Es recomendable utilizar valores de 10 en 10 o de 100 en 100, nunca de uno en uno.
Un elemento padre nunca podra estar sobre sus elementos hijos, sin embargo los lementos hijos si pueden dandoles un valor negativo y que el elemento padre no tenga definido valor de z-index.
z-index funciona en cualquier valor ecepto en static que es el valor por defecto