Diseño CSS: la propiedad de posición

Tabla de contenido

La propiedad posición especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, fijo, absoluto o pegajoso).

La posición Propiedad

La propiedad posición especifica el tipo de método de posicionamiento utilizado para un elemento.

Hay cinco valores de posición diferentes:

static
relative
fixed
absolute
sticky

Luego, los elementos se colocan usando las direcciones superior, inferior, izquierda y derecha. propiedades. Sin embargo, estas propiedades no funcionarán a menos que la posición La propiedad se establece primero. También funcionan de manera diferente según la posición. valor.

Propiedad CSS `posición: estática;`

Los elementos HTML se colocan estáticos de forma predeterminada.

Los elementos posicionados estáticamente no se ven afectados por las propiedades superior, inferior, izquierda y derecha.

Un elemento con position: static; no está posicionado de ninguna manera especial; es siempre posicionado de acuerdo con el flujo normal de la página:

This <div> element has position: static;

Aquí está el CSS que se utiliza:

Ejemplo

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Pruébelo usted mismo →

<!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>

Propiedad CSS `posición: relativa;`

Un elemento con posición: relativa; se coloca en relación con su posición normal.

Establecer las propiedades superior, derecha, inferior e izquierda de un elemento relativamente posicionado causará ajustarlo fuera de su posición normal. El resto del contenido no se ajustará para encajar en ningún espacio dejado por el elemento.

This <div> element has position: relative;

Aquí está el CSS que se utiliza:

Ejemplo

div.relative {
  position: relative;
  
left: 30px;
  border: 3px solid #73AD21;
}

Pruébelo usted mismo →

<!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>

Propiedad CSS `posición: fija;`

Un elemento con posición: fija; está posicionado 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. La parte superior, Las propiedades derecha, inferior e izquierda se utilizan para posicionar el elemento.

Un elemento fijo no deja un espacio en la página donde normalmente se habría ubicado.

Observe el elemento fijo en la esquina inferior derecha de la página. Aquí está el CSS que se utiliza:

Ejemplo

div.fixed {
  position: fixed;
  
bottom: 0;
  right: 0;
  width: 
300px;
  border: 3px solid #73AD21;
}

Pruébelo usted mismo →

<!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>

This <div> element has position: fixed;

Propiedad CSS `posición: absoluta;`

Un elemento con posición: absoluta; se posiciona 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 posicionado absoluto no tiene ancestros posicionados, 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 elementos.

Aquí hay un ejemplo simple:

This <div> element has position: relative;

This <div> element has position: absolute;

Aquí está el CSS que se utiliza:

Ejemplo

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;
}

Pruébelo usted mismo →

<!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>

Propiedad CSS `posición: pegajosa;`

Un elemento con position: sticky; se posiciona según la posición de desplazamiento del usuario.

Un elemento adhesivo 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 posición: fija).

Nota: Internet Explorer no admite el posicionamiento fijo. Safari requiere un -webkit- prefijo (ver ejemplo a continuación). También debe especificar al menos uno de top, right, abajo o izquierda para Posicionamiento pegajoso para trabajar.

En este ejemplo, el elemento adhesivo se adhiere a la parte superior de la página (top: 0), cuando alcanza su posición de desplazamiento.

Ejemplo

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: 
  sticky;
  top: 0;
  background-color: green;
  
  border: 2px solid #4CAF50;
}

Pruébelo usted mismo →

<!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>

Colocar texto en una imagen

Cómo colocar texto sobre una imagen:

Ejemplo

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Inténtalo tú mismo:

Arriba a la izquierda →

<!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>

Arriba a la derecha →

<!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>

Abajo a la izquierda →

<!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>

Abajo a la derecha →

<!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>

Centrado →

<!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>

Más ejemplos

Este ejemplo demuestra cómo establecer la forma de un elemento. El elemento se recorta en esta forma y se muestra.

Establecer la forma de un elemento

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">

</body>
</html>

Todas las propiedades de posicionamiento CSS

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 de un elemento.
right: Establece el borde del margen derecho para un cuadro posicionado
top: Establece el borde del margen superior para un cuadro posicionado

Diseño CSS: la propiedad de posición

Tabla de contenido

La posición Propiedad

Propiedad CSS posición: estática;

Ejemplo

Propiedad CSS posición: relativa;

Ejemplo

Propiedad CSS posición: fija;

Ejemplo

Propiedad CSS posición: absoluta;

Ejemplo

Propiedad CSS posición: pegajosa;

Ejemplo

Colocar texto en una imagen

Ejemplo

Más ejemplos

Todas las propiedades de posicionamiento CSS

Propiedad CSS `posición: estática;`

Propiedad CSS `posición: relativa;`

Propiedad CSS `posición: fija;`

Propiedad CSS `posición: absoluta;`

Propiedad CSS `posición: pegajosa;`