Ejemplo
Coloque un elemento
:
h2 {
posición: absoluta;
izquierda: 100px;
superior: 150px;
}
Inténtalo tú mismo »
Más ejemplos de «Pruébelo usted mismo» a continuación.
Definición y uso
los position propiedad especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo o fijo).
| Valor por defecto: | estático |
|---|---|
| Heredado: | no |
| Animable: | no. Leer acerca de animable |
| Versión: | CSS2 |
| Sintaxis de JavaScript: | objeto.style.position = «absoluto» Pruébelo |
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| posición | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
Nota: los sticky El valor no es compatible con Internet Explorer o Edge 15 y versiones anteriores.
Sintaxis CSS
posición: estática | absoluta | fija | relativa | pegajosa | inicial | heredar;
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| estático | Valor por defecto. Los elementos se representan en orden, tal como aparecen en el flujo del documento. | Juegalo « |
| absoluto | El elemento está posicionado en relación con su primer elemento ancestro posicionado (no estático) | Juegalo « |
| reparado | El elemento está posicionado en relación con la ventana del navegador. | Juegalo « |
| relativo | El elemento está posicionado en relación con su posición normal, por lo que «left: 20px» agrega 20 píxeles a la posición IZQUIERDA del elemento. | Juegalo « |
| pegajoso | El elemento se posiciona según la posición de desplazamiento del usuario.
Un elemento pegajoso alterna entre Nota: No es compatible con IE / Edge 15 o versiones anteriores. Compatible con Safari desde la versión 6.1 con un prefijo -webkit-. |
Intentalo « |
| inicial | Establece esta propiedad en su valor predeterminado. Leer acerca de inicial | Juegalo « |
| heredar | Hereda esta propiedad de su elemento padre. Leer acerca de heredar |
Más ejemplos
Ejemplo
Cómo colocar un elemento en relación con su posición normal:
h2.pos_left {
posición: relativa;
izquierda: -20px;
}
h2.pos_right {
posición: relativa;
izquierda: 20px;
}
Inténtalo tú mismo »
Ejemplo
Más posicionamiento:
# parent1 {
posición: estática;
borde: 1px azul sólido;
ancho: 300px;
altura: 100px;
}
# child1 {
posición: absoluta;
borde: 1px rojo sólido;
arriba: 70px;
derecha: 15px;
}
# parent2 {
posición: relativa;
borde: 1px azul sólido;
ancho: 300px;
altura: 100px;
}
# child2 {
posición: absoluta;
borde: 1px rojo sólido;
arriba: 70px;
derecha: 15px;
}
Inténtalo tú mismo »
páginas relacionadas
Tutorial CSS: posicionamiento CSS
Referencia HTML DOM: propiedad de posición