La propiedad CSS Position

La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento (static, relative, fixed, absolute o sticky). A continuación, los elementos se colocan utilizando las propiedades superior, inferior, izquierda y derecha. Sin embargo, estas propiedades no funcionarán a menos que la propiedad position se establezca primero. También funcionan de manera diferente según el valor de la posición.

Por lo tanto, los 5 diferentes valores que podemos encontrar son:

  • static
  • relative
  • fixed
  • absolute
  • sticky

position: static;

Los elementos HTML se colocan estáticos de forma predeterminada. Los elementos posicionados estáticos no se ven afectados por las propiedades top, right, bottom e left . Un elemento con position: static; no está posicionado de ninguna manera especial, siempre se posiciona de acuerdo con el flujo normal de la página.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any
 special way; it is always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

position: relative

Un elemento con position: relative; se coloca en relación con su posición normal. Establecer las propiedades top, right, bottom e left de un elemento relativamente posicionado hará que se ajuste fuera de su posición normal. El resto del contenido no se ajustará para encajar en ningún espacio dejado por el elemento.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

position: fixed;

Un elemento con position: fixed; se coloca en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar, incluso si se desplaza la página. Las propiedades top, right, bottom e left se utilizan para colocar el elemento. Un elemento fijo no deja un espacio en la página donde normalmente habría estado ubicado. Observa el elemento fijo en la esquina inferior derecha de la página. Aquí está el CSS que se utiliza.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, 
which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

position: absolute;

Un elemento con position: absolute; se coloca en relación con el ancestro posicionado más cercano (en lugar de posicionarse en relación con la ventana gráfica, como fijo). Sin embargo; si un elemento con posición absoluta no tiene ancestros con posición, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.

Nota: Los elementos de posición absoluta se eliminan del flujo normal y pueden superponerse a los elementos.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest 
positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

position: sticky;

Un elemento con position: sticky; se posiciona en función de la posición de desplazamiento del usuario. Un elemento fijo alterna entre relativo y fijo, dependiendo de la posición de desplazamiento. Se coloca en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, se "pega" en su lugar (como position: fixed;).

Nota: Internet Explorer no admite el posicionamiento fijo. Safari requiere un prefijo -webkit- (ver ejemplo a continuación). También debe especificar al menos uno de top, right, bottomy leftpara que funcione el posicionamiento fijo.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0),
 when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no 
quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
 id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
 maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad.
 Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

Posicionar texto en una imagen

Veamos 5 ejm de como posicionar texto en una imagen

Posicionar texto arriba a la izquierda

El código es el siguiente:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}

img { 
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>

</body>
</html>

Posicionar texto arriba a la derecha

El código es el siguiente:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}

img { 
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>

</body>
</html>

Texto centrado

El código es el siguiente:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}

img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>

</body>
</html>

Abajo a la derecha

El código es el siguiente:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}

img { 
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

Abajo a la izquierda

El código es el siguiente:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}

img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

Resumen de propiedades

Propiedad Descripción
bottom Establece el borde del margen inferior para un cuadro posicionado
clip Recorta un elemento absolutamente posicionado
left Establece el borde del margen izquierdo para un cuadro posicionado
position Especifica el tipo de posicionamiento para un elemento.
right Establece el borde del margen derecho para un cuadro posicionado
top Establece el borde del margen superior para un cuadro posicionado