Diseño CSS - La propiedad position
La positionpropiedad especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, fijo, absoluto o pegajoso).
La propiedad de posición
La positionpropiedad especifica el tipo de método de posicionamiento utilizado para un elemento.
Hay cinco valores de posición diferentes:
staticrelativefixedabsolutesticky
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 position
propiedad se establezca primero. También funcionan de manera diferente según el valor de la posición.
posición: estática;
Los elementos HTML se colocan estáticos de forma predeterminada.
Los elementos posicionados estáticos no se ven afectados por las propiedades superior, inferior, izquierda y derecha.
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:
Aquí está el CSS que se utiliza:
Ejemplo
div.static {
position: static;
border: 3px solid #73AD21;
}
posición: relativa;
Un elemento con position: relative;se coloca en relación con su posición normal.
Establecer las propiedades superior, derecha, inferior e izquierda 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.
Aquí está el CSS que se utiliza:
Ejemplo
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
posición: fijo;
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 superior, derecha, inferior e izquierda se utilizan para colocar el elemento.
Un elemento fijo no deja un espacio en la página donde normalmente habría estado 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;
}
position: fixed;posición: absoluta;
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.
Aquí hay un ejemplo simple:
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;
}
posición: pegajosa;
Un elemento con position: sticky;se posiciona en función de la posición de desplazamiento del usuario.
Un elemento fijo alterna entre relativey fixed, 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 prefijo -webkit- (ver ejemplo a continuación). También debe especificar al menos uno de , topo para que funcione el posicionamiento fijo.rightbottomleft
En este ejemplo, el elemento adhesivo se adhiere a la parte superior de la página ( top: 0), cuando llega a su posición de desplazamiento.
Ejemplo
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Posicionamiento de texto en una imagen
Cómo colocar texto sobre una imagen:
Ejemplo
Inténtalo tú mismo:
Más ejemplos
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |