CSS Position
La propiedad “position” en CSS permite especificar cómo se posiciona un elemento en relación con su contenedor padre y/o a la página en sí. Los valores comunes para esta propiedad incluyen:
static(valor por defecto): El elemento se posiciona de acuerdo a cómo aparece en el flujo del documento.
relative: El elemento se posiciona en relación con su posición original en el flujo del documento. Se pueden usar las propiedades “top”, “bottom”, “left” y “right” para moverlo a una nueva posición.
absolute: El elemento se posiciona en relación con su primer ancestro con posicionamiento no estático (es decir, cualquier valor diferente a “static”). Las propiedades “top”, “bottom”, “left” y “right” funcionan de la misma manera que en “relative”.
fixed: El elemento se posiciona con relación a la ventana del navegador y permanece en la misma posición aunque el usuario haga scroll.
sticky: Es una mezcla entre “relative” y “fixed”, el elemento se posiciona en relación con su posición original en el flujo del documento, pero una vez que el usuario hace scroll y el elemento llega a un cierto punto en la pantalla, se comporta como “fixed” y se queda en su posición.
Es importante tener en cuenta que para usar las propiedades “top”, “bottom”, “left” y “right” es necesario que el elemento tenga una posición “relative”, “absolute” o “fixed”.
Posición estática
La posición “static” es el valor por defecto para todos los elementos en un documento HTML y es la forma en que los elementos se colocan en una página de manera predeterminada. Cuando un elemento tiene una posición “static”, se posiciona en el orden en que aparece en el código HTML, y no se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para moverlo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
background-color: #f1f1f1;
}
.box {
width: 30%;
height: 150px;
margin: 10px;
background-color: #ffcc00;
position: static; /* este es el valor por defecto */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, los elementos con clase “box” se mostrarán uno al lado del otro en una fila, debido a que se estableció display: flex y flex-wrap: wrap en la clase “container”, y se establecieron un ancho y alto a los elementos “box”.
Sin embargo, al tener una posición “static” no se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para moverlos.
Es importante mencionar que la propiedad position:static no es necesaria si no se establece ninguna otra posición, ya que es el valor por defecto.
Posición relativa
La posición “relative” permite especificar cómo un elemento se posiciona en relación con su posición original en el flujo del documento. Al establecer un elemento como “relative”, se pueden usar las propiedades “top”, “bottom”, “left” y “right” para desplazarlo con relación a su posición original.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 90%;
margin: 0 auto;
background-color: #f1f1f1;
}
.box {
width: 150px;
height: 150px;
background-color: #ffcc00;
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con clase “box” se mostrará en su posición original dentro del contenedor, pero se ha desplazado hacia abajo 50px y hacia la derecha 50px en relación con su posición original gracias a las propiedades “top” y “left” respectivamente.
Otro ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 90%;
height: 300px;
margin: 0 auto;
background-color: #f1f1f1;
}
.box1 {
position: relative;
width: 150px;
height: 150px;
background-color: #ffcc00;
top: -50px;
left: -50px;
}
.box2 {
position: relative;
width: 150px;
height: 150px;
background-color: #00ccff;
bottom: -50px;
right: -50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo se crearon dos elementos “box1” y “box2” con posición “relative”, y cada uno se ha desplazado en una dirección opuesta, el primero hacia arriba y a la izquierda, y el segundo hacia abajo y a la derecha.
Esto se logró utilizando las propiedades “top” y “left” para el primer elemento y “bottom” y “right” para el segundo.
Al igual que en el ejemplo anterior el contenedor tiene una posición “relative” entonces los elementos “box” se posicionan con relación a su posición dentro de ese contenedor y no en relación con el resto de la página.
Es importante mencionar que al establecer un elemento como “relative”, no afecta el flujo del documento, es decir, los elementos siguen ocupando el mismo espacio y no afecta a los elementos hermanos.
Posición fija
La propiedad “position: fixed” es utilizada para posicionar un elemento en una posición fija en relación con la ventana del navegador. Es similar a “absolute” pero mientras que la posición “absolute” se posiciona con relación a un elemento padre cuyo posición no es fija, “fixed” se posiciona en relación con la ventana del navegador y permanece en esa posición aunque el usuario haga scroll en la página.
Al establecer un elemento con esta propiedad, se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para desplazarlo en relación con su posición en la ventana del navegador.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.caja-fija {
position: fixed;
top: 10px;
right: 10px;
width: 150px;
height: 150px;
background-color: #ffcc00;
}
</style>
</head>
<body>
<div class="caja-fija"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se ha creado un elemento con clase “caja-fija” con posición “fixed” y se ha establecido en las propiedades “top” y “right” con valor 10px, esto hace que el elemento aparezca en la esquina superior derecha de la ventana del navegador, y aunque el usuario haga scroll en la página, el elemento permanecerá en la misma posición.
Posición absoluta
La posición “absolute” permite especificar cómo un elemento se posiciona en relación a su elemento padre más cercano cuyo posicionamiento no sea “estático”.
Al establecer un elemento como “absolute”, se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para desplazarlo en relación a su elemento padre.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 90%;
height: 300px;
margin: 0 auto;
background-color: #f1f1f1;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #ffcc00;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se estableció la posición “relative” en el contenedor y “absolute” en el elemento “box”, luego el elemento “box” se ha desplazado hacia abajo 50px y hacia la derecha 50px en relación a su elemento padre (el contenedor) gracias a las propiedades “top” y “left” respectivamente.
Al establecer un elemento como “absolute”, este se saca del flujo normal de la página, es decir, los elementos siguen ocupando el mismo espacio, pero el elemento con posición absoluta se posiciona en relación a su padre más cercano cuyo posicionamiento no sea estático.
Posición pegajosa
La posición “sticky” es una mezcla entre “relative” y “fixed”, el elemento se comporta como “relative” hasta que se desplaza fuera del viewport y luego se comporta como “fixed” manteniendo su posición en la pantalla.
La posición “sticky” se especifica con la propiedad “position” y se utiliza en conjunto con “top”, “bottom”, “left” y/o “right” para indicar el punto en el que el elemento se pegará al viewport.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px;
}
</style>
</head>
<body>
<div class="navbar">
<h1>Navbar</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se ha creado un elemento con clase “navbar” con posición “sticky” y se ha establecido en la propiedad “top” con valor 0px, esto hace que el elemento permanezca en la parte superior de la pantalla mientras el usuario hace scroll en la página, pero si el elemento se desplaza fuera del viewport, este volverá a su posición original.