CSS ofrece una gran cantidad de propiedades para el posicionamiento de elementos en una página web. Entre estas propiedades, «position» es una de las más importantes. Con ella podemos definir cómo queremos que un elemento sea posicionado en relación a su contenedor o a otros elementos de la página. En este artículo te explicaremos cómo usar «position» apropiadamente en CSS para lograr los resultados deseados.
Los valores de «position»
Como usar «position» apropiadamente en CSS. La propiedades «position» puede tomar varios valores: static, relative, absolute, fixed y sticky. Cada uno de ellos tiene un comportamiento diferente y es importante entender las diferencias entre ellos.
static
«static«: es el valor por defecto y significa que el elemento se posicionará de acuerdo al flujo normal del documento, es decir, como si no tuviera ninguna propiedad de posicionamiento. Un ejemplo sencillo de cómo usar «position: static» en CSS sería el siguiente:
Supongamos que queremos crear una página web con dos divs de diferentes colores y tamaños. Para ello, podemos usar la siguiente estructura HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de position: static</title>
<style>
#div1 {
background-color: red;
width: 200px;
height: 200px;
}
#div2 {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
En este ejemplo, creamos dos divs con diferentes colores y tamaños, y los anidamos uno dentro del otro. Sin embargo, no hemos especificado ningún valor para la propiedad «position«, por lo que ambos divs se mostrarán en su posición por defecto, que es «static«. Esto significa que los divs se colocarán uno debajo del otro, en orden de aparición en el código HTML.
En resumen, el uso de «position: static» nos permite colocar elementos en su posición por defecto, sin necesidad de especificar ninguna otra propiedad adicional. Ahora continuaremos con la opcion que presentamos anteriormente position:relative.
relative
«relative«: el elemento se posicionará de manera relativa a su posición original en el flujo del documento. Es decir, podemos moverlo hacia arriba, abajo, derecha o izquierda desde su posición original, pero sin afectar la posición de los demás elementos.
Siguiendo el ejemplo anterior, si queremos mover los divs a una posición diferente, podemos cambiar el valor de «position» a «relative«, «absolute» o «fixed«, dependiendo del efecto que queramos lograr. Por ejemplo, si queremos mover el div2 hacia la derecha, podemos usar «position: relative» y «left: 50px» para desplazarlo 50 píxeles hacia la derecha:
#div2 {
background-color: blue;
width: 100px;
height: 100px;
position: relative;
left: 50px;
}
absolute
«absolute«: Cuando se establece la posición «absolute«, el elemento se posiciona de forma absoluta en relación a su contenedor posicionado más cercano. Un ejemplo sencillo de cómo usar la posición «absolute» en CSS sería el siguiente:
Supongamos que queremos colocar un botón en la esquina superior derecha de un contenedor, sin importar el tamaño del contenedor. Para ello, podemos utilizar la posición «absolute» y establecer las propiedades «top«, «right«, «bottom» y «left» para posicionar el botón en la esquina deseada.
El código HTML podría ser el siguiente:
<div class="contenedor">
<button>Botón</button>
</div>
Y el código CSS correspondiente, que utiliza «position: absolute», sería el siguiente:
.contenedor {
position: relative;
width: 500px;
height: 300px;
background-color: lightblue;
}
button {
position: absolute;
top: 10px;
right: 10px;
}
En este ejemplo, al establecer la posición «absolute» para el botón, se posiciona de forma absoluta en relación al contenedor más cercano que tenga una posición establecida (en este caso, el «div» con clase «contenedor«, al que hemos establecido la posición «relative«). Además, utilizamos las propiedades «top» y «right» para posicionar el botón en la esquina superior derecha del contenedor, con un margen de 10 píxeles respecto a los bordes.
Es importante tener en cuenta que al utilizar la posición «absolute», el elemento se saca del flujo normal del documento, por lo que puede superponerse a otros elementos si no se establecen correctamente las propiedades de posicionamiento y dimensiones. En resumen, el uso de la posición «absolute» en CSS se utiliza principalmente para posicionar elementos de forma absoluta en relación a su contenedor, y se deben tener en cuenta sus efectos en el flujo del documento.
fixed
Cuando se establece la posición «fixed«, el elemento se posiciona de forma fija en relación a la ventana del navegador, es decir, no se mueve aunque se haga scroll en la página. Un ejemplo sencillo de cómo usar la posición «fixed» en CSS sería el siguiente:
Supongamos que queremos crear un menú de navegación que se mantenga fijo en la parte superior de la página, incluso cuando se haga scroll hacia abajo. Para ello, podemos utilizar la posición «fixed» y establecer las propiedades «top«, «right«, «bottom» y «left» para posicionar el menú en la parte superior de la ventana. El código HTML podría ser el siguiente:
HTML:
<header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
Y el código CSS correspondiente, que utiliza «position: fixed«, sería el siguiente:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: lightblue;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
En este ejemplo, al establecer la posición «fixed» para el encabezado («header»), este se posiciona de forma fija en la parte superior de la ventana del navegador, incluso cuando se hace scroll hacia abajo. Además, utilizamos las propiedades «top» y «left» para posicionar el menú en la esquina superior izquierda de la ventana, y establecemos un ancho del 100% para que ocupe todo el ancho de la ventana.
Es importante tener en cuenta que al utilizar la posición «fixed«, el elemento se saca del flujo normal del documento, por lo que puede superponerse a otros elementos si no se establecen correctamente las propiedades de posicionamiento y dimensiones. El uso de la posición «fixed» en CSS se utiliza principalmente para mantener elementos fijos en la pantalla, y se deben tener en cuenta sus efectos en el flujo del documento.
sticky
«sticky«: el elemento se posicionará de manera relativa hasta que alcance una posición específica, y luego se volverá fijo en esa posición. Es decir, el elemento se mantendrá en la misma posición hasta que el usuario haga scroll hasta un punto específico de la página, basados en los valores de top, right, bottom, y left. El desplazamiento no afecta la posición de ningún otro elmento.
Estos valores siempre crean un nuevo contexto de apilamiento. Nótese que un elemento sticky se «adhiere» a su ancestro más cercano que tiene un «mecanismo de desplazamiento» (creado cuando el overflow es hidden, scroll, auto, o bien overlay), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento «sticky» (ver el Github issue en W3C CSSWG).
Ejemplo:
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
<div class="box" id="one">One</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</p>
</div>CSS:
<style>
.box {
width: 100px;
height: 100px;
color: white;
}
#one {
position: sticky;
top: 20px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
}
</style>En este ejemplo, el elemento «div» se moverá 20px hacia abajo y 30px hacia la derecha desde su posición original en el flujo del documento.
En conclusión, la propiedad «position» es una herramienta poderosa para el posicionamiento de elementos en una página web. Es importante entender los diferentes valores que puede tomar, cómo funciona en relación al modelo de caja y cómo combinarlo con otras propiedades de CSS para lograr los resultados deseados. Con este conocimiento, podrás crear diseños más complejos y dinámicos en tus proyectos web.
¿Has usado alguna de estas formas de «position» en tus propias páginas web? ¿Tienes algún consejo o truco que te gustaría compartir? ¡Déjanos saber en los comentarios!