La propiedad position, como su nombre indica, sirve para establecer la posición de un elemento. Su valor por defecto es static (sin posición). Es soportada en todos los navegadores (Cabe destacar que en todas las versiones de IE, incluyendo la 8, no soporta el valor inherit). A continuación mostraremos un ejemplo, los valores de la propiedad, los distintos tipos de posicionamiento que hay explicados con un ejemplo, y todas las propiedades CSS de posicionamiento:
Ejemplo
Un ejemplo (posicionar un encabezado con el valor absolute, dando posiciones absolutas):
h1
{
position:absolute;
left:80px;
top:120px;
} |
Valores de la propiedad
| Valor | Descripción |
|---|---|
| absolute | Genera un elemento absolutamente posicionado, posicionado relativamente al primer elemento padre que tiene otra posición que no es estático. Las posiciones del elemento están especificadas con “left”, “top”, “right” y “bottom”. Recordemos que si utilizamos este valor, la posición del elemento no será relativa a la ventana del navegador. |
| fixed | Genera un elemento absolutamente posicionado, posicionado relativamente a la ventana del navegador. Las posiciones del elemento están especificadas con “left”, “top”, “right” y “bottom”. |
| relative | Genera un elemento relativamente posicionado, posicionado relativamenta a su posición normal, así que “right: 10” añade 10 píxeles a la posición derecha del elemento. |
| static | Por defecto. Sin posición, el elemento se encuentra en un flujo normal (ignora top, bottom, left, right o z-index). |
| inherit | Especifica que el valor de la posición debe ser heredado del elemento padre. |
Ejemplos de posicionamiento
Posicionamiento Estático
El posicionamiento estático no es afectado por los valores top, bottom, left, right, o la declaración z-index. Al estar por defecto, no se incluyen ejemplos.
Posicionamiento Fixed
p.fixed
{
position:fixed;
top:10px;
right:15px;
} |
Posicionamiento Relativo
h1.izquierda
{
position:relative;
left:-10px;
} |
h1.derecha
{
position:relative;
left:10px;
} |
El contenido de los elementos en posición relativa se puede mover y se superponen otros elementos, pero el espacio reservado sigue presente en el flujo normal.
h2.top
{
position:relative;
top:-30px;
} |
Los elementos relativos son usados habitualmente como bloques contenedores para elementos con posición absoluta.
Posicionamiento Absoluto
Los elementos absolutos pueden superponer a otros elementos.
h1
{
position:absolute;
left:100px;
top:150px;
} |
Elementos superpuestos
Cuando los elementos están posicionados fuera del flujo normal, pueden superponer a otros elementos.
La propiedad z-index especifica el orden de superposición de un elemento (si el elemento se colocará detrás o encima de otro).
Un elemento puede tener orden de superposición negativa o positiva:
div.sol
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
} |
Todas las propiedades CSS de posicionamiento
El número en la columna “CSS” identifica en cuál versión de CSS es definida la propiedad.
| Propiedad | Descripción | Valores | CSS |
|---|---|---|---|
| bottom | Fija el borde del margen inferior para un contenedor posicionado. | auto length % inherit | 2 |
| clip | Acorta un elemento absolutamente posicionado. | shape auto inherit | 2 |
| cursor | Especifica el tipo de cursor que será mostrado. | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| left | Fija el borde del margen izquierdo para un contenedor posicionado. | auto length % inherit | 2 |
| overflow | Especifica lo que ocurrirá si el contenido desborda el contenedor de un elemento. | auto hidden scroll visible inherit | 2 |
| position | Especifica el tipo de posicionamiento de un elemento. | absolute fixed relative static inherit | 2 |
| right | Fija el borde del margen derecho para un contenedor posicionado. | auto length % inherit | 2 |
| top | Fija el borde del margen superior para un contenedor posicionado. | auto length % inherit | 2 |
| z-index | Define el orden de superposición de un elemento. | number auto inherit | 2 |
Si deseáis ver más guías básicas sobre las distintas propiedades que existen en CSS, echad un vistazo a la categoría CSS Básico.
Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
Pingback: Diseño de Email 3- Imágenes – Blog Dis-continua()