Css pegajoso
Cuando se establece la posición relativa a un elemento, sin añadir ningún otro atributo de posicionamiento (arriba, abajo, derecha, izquierda) no ocurrirá nada. Cuando añades una posición adicional, como left: 20px el elemento se moverá 20px a la derecha de su posición normal. Aquí puedes ver que este elemento es relativo a sí mismo. Cuando el elemento se mueve, ningún otro elemento en el diseño se verá afectado.
Hay una cosa que debes tener en cuenta al establecer la posición – relativa a un elemento limita el alcance de los elementos hijos absolutamente posicionados. Esto significa que cualquier elemento que sea hijo de este elemento puede ser posicionado absolutamente dentro de este bloque.
En este ejemplo, verás cómo se mueve el elemento posicionado relativamente cuando se cambian sus atributos. El primer elemento se desplaza hacia la izquierda y hacia arriba desde su posición normal, mientras que el segundo elemento permanece en el mismo lugar porque no se ha cambiado ninguno de los atributos de posicionamiento adicionales.
El posicionamiento se realiza en relación con el primer elemento padre relativamente (o absolutamente) posicionado. En el caso de que no haya ningún elemento padre posicionado, se posicionará relacionado directamente con el elemento HTML (la propia página).
Posición: absoluta
Cada vez que trabajo en un componente que necesita posicionamiento absoluto, me pregunto: ¿es realmente necesario? Empecé a notar algunos casos de uso en los que el uso de position: absolute no es necesario. Esto me pareció interesante y pensé en documentar los casos de uso que suelo encontrar mientras trabajo en proyectos de front-end.
Si nos remontamos 5 años atrás en el tiempo, CSS flexbox era todavía nuevo y no se podía utilizar con un fallback adecuado. CSS grid ni siquiera era soportado en ese entonces. Eventualmente, usaríamos posicionamiento CSS para lograr el diseño deseado. Sin embargo, algunos de estos casos de uso pueden ser resueltos con CSS flexbox o grid hoy en día.
El otro día, estábamos trabajando en el desarrollo del front-end de una página de aterrizaje, y mi compañera me preguntó acerca de un problema de diseño que estaba enfrentando. El problema se debía a position: absolute, así que intervine y traté de ayudarla, y lo solucionamos sin siquiera usar posicionamiento CSS. En ese momento, me di cuenta de que debía documentar eso, y eso es lo que estoy haciendo ahora.
Posición: fija
El posicionamiento absoluto significa que el elemento está completamente fuera del flujo normal del diseño de la página. En lo que respecta al resto de los elementos de la página, el elemento posicionado de forma absoluta simplemente no existe. El elemento en sí se dibuja por separado, como si estuviera «encima» de todo lo demás, en la posición que se especifica mediante los atributos izquierda, derecha, arriba y abajo.
Usando la posición que especifique con estos atributos, el elemento se coloca en esa posición dentro de su último elemento antecesor que tenga un atributo de posición que no sea estático (los elementos de la página son estáticos por defecto cuando no se especifica el atributo de posición), o en el cuerpo del documento (vista del navegador) si no existe tal antecesor.
…entonces el div interior se posicionaría a 20px de la parte superior del div exterior, y a 20px del borde izquierdo del mismo, porque el div exterior no está posicionado con position:static porque lo hemos configurado explícitamente para usar position:relative.
El posicionamiento relativo, por otro lado, es como si no se hubiera establecido ningún posicionamiento, pero los atributos izquierdo, derecho, superior e inferior «empujan» el elemento fuera de su disposición normal. Sin embargo, el resto de los elementos de la página siguen estando dispuestos como si el elemento estuviera en su lugar normal.
Position: absolute vs relative
</div>Relatively positioning elementsUse relative to position an element according to the normal flow of the document.Offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.
</div>Absolutely positioning elementsUse absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.Offsets are calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.
</div>Fixed positioning elementsUse fixed to position an element relative to the browser window.Offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.
</div>Sticky positioning elementsUse sticky to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.Offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.