Guía completa sobre la propiedad position de CSS, un recurso utilizado para determinar la posición de los elementos HTML.
La propiedad position de CSS es un recurso que permite organizar los elementos HTML dentro de una página. Es este recurso el que posibilita, por ejemplo, mantener un menú o un botón siempre visible en una página, independientemente de la posición de la barra de desplazamiento.
El uso adecuado de esta propiedad es esencial para hacer el sitio más receptivo y también impacta directamente en la accesibilidad de la aplicación. Por eso, si tienes una dirección electrónica o quieres trabajar creando layouts para sitios web, sigue leyendo este texto para entender qué es position en CSS y cómo utilizar este recurso en el día a día.
¿Qué es la propiedad position de CSS?
Antes de explicar exactamente qué es esta propiedad, es bueno recordar que CSS es la sigla de Cascading Style Sheets (Hojas de Estilo en Cascada, en español). Se trata de un lenguaje utilizado para definir cómo será la presentación visual de los elementos escritos en HTML.
La propiedad position determina cómo se ubicarán los elementos en la página y si podrán moverse a posiciones específicas, como derecha, izquierda, arriba o abajo. Esta característica permite que un sitio presente elementos fijos, flotantes, superpuestos o cuyo formato y posición cambian según el usuario navega en la página.
Definición y función de la propiedad
La propiedad position de CSS permite cambiar el posicionamiento predeterminado del elemento HTML, que siempre es estático, para otros valores. Esto se hace con el objetivo de organizar los componentes de la página de acuerdo con el proyecto de diseño de la aplicación.
Existen cinco valores que pueden ser asignados a esta propiedad, son ellos:
- Estático (estático)
- Fijo (fijo)
- Relativo (relativo)
- Absoluto (absoluto)
- Pegajoso (pegado)
Con la excepción del valor static, todos los demás permiten un posicionamiento personalizado del elemento, siempre que encaje en las propiedades right, left, top y bottom (derecha, izquierda, arriba y abajo).
¿Por qué la propiedad position es esencial en el diseño de páginas?
Esta propiedad es imprescindible para el diseño de las páginas porque permite controlar y organizar la posición de los elementos HTML, creando así, diseños más responsivos, funcionales y personalizados.
Cómo funciona la propiedad position
Uno de los usos más comunes de la propiedad position de CSS es para crear un encabezado fijo en la página. Esta característica es muy utilizada por aquellos que no quieren que la información relevante sobre el sitio o los recursos que pueden ayudar en la navegación salgan del campo de visión del usuario.
Para crear esta estructura, es necesario insertar la propiedad position: fixed al elemento encabezado dentro del código HTML. Además, para no permitir que el encabezado oculte parte del contenido de la página, es necesario agregar la propiedad padding-top o margin-top al elemento de contenido principal.
El flujo normal de renderización de los elementos
El flujo normal de renderización de los elementos en HTML determina que los componentes aparecerán en la página en el mismo orden en que aparecen en el código. Este patrón puede no ser el más adecuado para quienes desean que la página sea más atractiva y receptiva.
Por eso, utilizar la propiedad position del CSS es ideal para quienes desean que el sitio web sea más personalizado y también para que determinados elementos estén siempre visibles en la página, como el menú y el botón de compras. De este modo, es posible mejorar la experiencia del usuario y, dependiendo de la finalidad de su sitio web, convertir más clientes potenciales.
Diferencia entre position y otras propiedades de diseño
Se você tem ou já desenvolveu um site, provavelmente já sabe que existem outros recursos que podem ser utilizados para organizar o layout de uma página. Contudo, cada um deles deve ser usado em circunstâncias específicas. Veja abaixo quais são essas propriedades e saiba o que as diferencia da propriedade position do CSS:
- Display: determina como o componente será exibido, de acordo com as seguintes opções: bloco, inline, flexível ou em grade.
- Float: utilizado para deixar o elemento flutuando em relação ao componente pai.
- Flex: empregado para alinhar e organizar elementos dentro de um contêiner.
- Grid: trata-se de uma estrutura invisível que divide os espaços dentro de uma página.
Tipos de posición en CSS
Ahora que ya sabes qué es la propiedad position y para qué sirve, echa un vistazo a los valores disponibles para esta propiedad y aprende cuándo utilizar cada uno de ellos.
Estático: valor predeterminado
La posición predeterminada de todos los elementos HTML es estática. Se utiliza cuando no es necesario cambiar la posición del elemento, dejando que aparezca en el mismo orden en que se inserta en el código.
Los elementos con posición estática no responden a las propiedades superior, inferior, derecha e izquierda. Por lo tanto, si necesita posicionar el componente HTML teniendo en cuenta una de estas variables, será necesario cambiar el valor del elemento.
Relativo: reposicionamiento en relación con el flujo
Al utilizar el valor relative, es posible reposicionar el componente utilizando los patrones top, button, left y right, sin que ese elemento pierda su espacio original en el diseño de la página. Esta propiedad se utiliza mucho para organizar movimientos sutiles, que no afectarán al resto de elementos de la página.
Además, position: relative también se puede utilizar como referencia a la hora de posicionar un elemento absoluto, ya que estos componentes se basan en estructuras cercanas con valores diferentes de static.
Absoluto: posicionamiento en relación con el elemento padre
Un elemento con la configuración position: absolute no forma parte del flujo normal de la página, por lo que no tiene un espacio propio en el diseño y todas las demás estructuras se comportan como si no existiera.
El componente con posición: absoluta siempre se coloca en relación con el elemento padre más cercano que no sea posición: estática. Este valor se utiliza mucho en elementos que deben aparecer sobre otros o que deben estar en un lugar específico de la pantalla, como los menús desplegables, por ejemplo.
Fijar: fijar elementos en la pantalla
El valor fixed tiene como objetivo fijar un elemento en un punto específico de la página, permaneciendo siempre igual, sin verse afectado por la barra de desplazamiento. Además, también hace que el elemento se elimine por completo del flujo de la página.
La posición: fixed se utiliza mucho para posicionar estructuras como barras de navegación y cabeceras fijas.
Sticky: efecto híbrido entre relativo y fijo
Este valor combina los comportamientos de relative y fixed. Esto significa que el elemento con position: sticky sigue el flujo de la página hasta un punto determinado, en el que pasa a ser fijo.
El uso de fixed es muy común cuando es necesario dejar un componente visible durante un periodo determinado, como un menú lateral, por ejemplo.
Cuándo utilizar cada valor de la propiedad position del CSS
Además de conocer en detalle cada valor de la propiedad position del CSS, vale la pena revisar cuándo usar cada uno de ellos, para garantizar un buen uso de este recurso:
- Relative: ideal para realizar pequeños ajustes visuales en elementos que siguen el flujo de la página.
- Absolute: muy indicado para elementos que deben posicionarse sobre un bloque de texto, como ventanas emergentes.
- Sticky: recomendado para páginas largas en las que es necesario fijar un elemento en la pantalla temporalmente durante el desplazamiento.
- Fixed: una excelente opción para cuando es necesario mantener elementos fijos en la pantalla, como un encabezado.
Ejemplos prácticos del uso de la propiedad position
Si aún tienes dudas sobre cómo aplicar la propiedad position del CSS, a continuación te mostramos algunos ejemplos prácticos de uso de esta propiedad.
Creando un encabezado fijo (fixed header)
Uno de los usos más comunes de la propiedad position del CSS es crear un encabezado fijo en la página. Esta función es muy utilizada por quienes desean que la información relevante sobre el sitio o los recursos que pueden ayudar en la navegación no salgan del campo de visión del usuario.
Para crear esta estructura, es necesario insertar la propiedad position: fixed en el elemento cabecera dentro del código HTML. Además, para evitar que la cabecera oculte parte del contenido de la página, es necesario añadir la propiedad padding-top o margin-top al elemento de contenido principal.
Botones flotantes con absolute y relative
Otro ejemplo práctico del uso de la propiedad position es para crear botones flotantes en una página, una función muy utilizada en las landing pages. Para crear esta estructura es necesario, primero, definir la posición del elemento padre usando el valor relative.
A continuación, será necesario definir la posición del botón con el valor absolute y ajustar las coordenadas para colocarlo en el lugar deseado, como ilustra el ejemplo a continuación:
.container {
position: relative;
}
.botao {}
position: absolute;
top: 60px;
left: 40px;Sticky em menus de navegação
También puedes usar esta propiedad para crear menús de navegación que permanezcan visibles durante el desplazamiento. Consulta a continuación el paso a paso de cómo hacerlo:
- Crea el elemento menú dentro de un contenedor o de una etiqueta
<nav>. - Añade la propiedad
position: sticky. - Defina
top: 0;para que el menú siempre esté en la parte superior de la página, independientemente de la posición de la barra de desplazamiento.
Boas práticas ao usar position do CSS
Para utilizar esta propiedad de manera adecuada y evitar que su uso haga que su sitio web sea menos receptivo y accesible, descubra ahora cuáles son las buenas prácticas para el uso de la propiedad position de CSS.
Evitar la superposición no deseada de elementos
Cuando esta propiedad se utiliza incorrectamente, puede causar la superposición de componentes HTML en la página, lo que puede impactar en el diseño, en la experiencia del usuario y también dificultar el funcionamiento de la navegación asistida.
Para evitar este problema, es vital no usar dos tipos diferentes de propiedad position en el mismo contenedor y siempre combinar esta característica con media queries, una característica de CSS que permite adaptar la posición de los elementos de acuerdo con las características de cada dispositivo.
Otra forma de evitar superposiciones no deseadas es usar esta propiedad junto con otras herramientas de diseño, como el Grid, que permiten un mayor control en la disposición de los componentes en una página.
Usando z-index junto con position
El z-index es una característica utilizada para establecer el orden en que los elementos HTML deben ser apilados. Para ello, se asigna un valor numérico a cada elemento, los componentes con valores menores quedan en el fondo de la pila y el que tiene un valor mayor se mostrará por encima de todos los demás.
Esta propiedad solo puede aplicarse en componentes que presenten un valor diferente de position: static.
Cuándo preferir flexbox o grid en lugar de position
Aunque la propiedad position sea muy versátil, no siempre es la mejor opción. En algunos casos, como cuando es necesario formatear layouts unidimensionales, en filas o columnas, lo ideal es optar por flexbox, ya que ofrece recursos más precisos para este tipo de diseño.
El flexbox también suele ser una buena alternativa para quienes desean alinear objetos, sin importar en qué dirección. Ya el grid es ideal para las ocasiones en que es necesario trabajar con componentes bidimensionales, para manipular bloques y también para construir la estructura principal de un sitio web.
Errores comunes al aplicar la posición
Para que puedas utilizar esta característica de la mejor manera posible, vale la pena conocer algunos de los errores más comunes al aplicar la propiedad position y cómo evitarlos.
Olvidar el contexto de posicionamiento
Es común que al elaborar un layout, la persona olvide definir un elemento padre antes de usar el position: absolute. Sin embargo, esto puede impactar directamente la estructura de la página, ya que los otros componentes se comportarán como si este elemento no existiera.
Mezclar posición con flotantes sin necesidad
Mezclar position y floats innecesariamente puede desestructurar tu layout. Esto se debe a que estas dos propiedades retiran el elemento del flujo normal de la página. Por lo tanto, al usarlas conjuntamente, pueden dificultar significativamente la organización de los elementos.
Problemas de capacidad de respuesta al fijar elementos
Al usar valores como absolute y fixed, el elemento HTML sale del flujo normal de la página. Esto hace que no se adapte a diferentes tamaños de pantalla, lo que afecta directamente en la responsividad de la aplicación. Para evitar que este error ocurra, use una media query dentro del bloque en el que se aplicará esta propiedad.
Conclusión
Entender qué es la propiedad position de CSS y cómo interfiere en el diseño de su sitio es fundamental para aquellos que desean crear aplicaciones responsivas, originales y atractivas. Por lo tanto, utilice los consejos presentados en este artículo al organizar los elementos HTML de su página.
Si quieres ver más contenido sobre el diseño de sitios web y también sobre diseño, sigue en el blog de HostGator y revisa otros artículos sobre estos temas: