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 |