La position propiedad especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, fijo o absoluto).
La posición de la propiedad
La position propiedad especifica el tipo de método de posicionamiento utilizado para un elemento.
Hay cuatro diferentes valores de posición:
-
static -
relative -
fixed -
absolute
Los elementos se colocan entonces usando la parte superior, inferior, izquierdo y propiedades adecuadas. Sin embargo, estas propiedades no funcionarán a menos que la position propiedad se establece en primer lugar. También funcionan de forma diferente en función del valor de posición.
position: static;
elementos HTML estático se posicionan de forma predeterminada.
elementos posicionados estáticos no se ven afectadas por la parte superior, inferior, izquierdo y propiedades adecuadas.
Un elemento con position: static; no está posicionado de manera especial; siempre se coloca de acuerdo con el flujo normal de la página:
Aquí está el CSS que se utiliza:
position: relative;
Un elemento con position: relative; está posicionado con respecto a su posición normal.
Configuración de la parte superior, derecha, abajo, izquierda y las propiedades de un elemento posicionado relativamente hará que se puede ajustar fuera de su posición normal. Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento.
Aquí está el CSS que se utiliza:
Ejemplo
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
} Inténtalo tú mismo " position: fixed;
Un elemento con position: fixed; se coloca en relación con el área de visualización, lo que significa que siempre permanece en el mismo lugar, incluso si la página se desplaza. La parte superior, derecha, abajo, izquierda y las propiedades se utilizan para posicionar el elemento.
Un elemento fijo no deja un vacío en la página en la que normalmente habría sido localizado.
Note 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;
} Inténtalo tú mismo " position: absolute;
Un elemento con position: absolute; se posiciona con respecto al antepasado posicionado más cercano (en lugar de posicionado con respecto a la ventana gráfica, como fija).
Sin embargo; si un elemento con posición absoluta no tiene antepasados posicionado, que utiliza el cuerpo del documento, y se mueve junto con el desplazamiento de página.
Nota: Un "positioned" elemento es uno cuya posición es nada más que static .
Aquí está un ejemplo sencillo:
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;
}
Inténtalo tú mismo " La superposición de elementos
Cuando se colocan los elementos, que se pueden superponer otros elementos.
El z-index propiedad especifica el orden de apilamiento de un elemento (qué elemento debe ser colocado en frente de o detrás de los otros).
Un elemento puede tener una orden de apilamiento positivo o negativo:
Se trata de un título
Debido a que la imagen tiene un índice z de -1, que se coloca detrás del texto.
Un elemento con mayor orden de apilamiento está siempre delante de un elemento con una orden de pila baja.
 | Nota: Si dos elementos posicionados superponen sin un z-index especificado, el último elemento posicionado en el código HTML se mostrará en la parte superior. |
|---|
Posicionamiento de texto de una imagen
Cómo colocar texto sobre una imagen:
Ejemplo
Inténtalo tú mismo:
Arriba a la izquierda » Arriba a la derecha» Abajo a la izquierda » Abajo a la derecha» »Centrado
Más ejemplos
Establecer la forma de un elemento
Este ejemplo muestra cómo establecer la forma de un elemento. El elemento se recorta en esta forma, y se muestra.
Cómo mostrar el desbordamiento de un elemento de desplazamiento utilizando
Este ejemplo muestra cómo establecer la propiedad de desbordamiento para crear una barra de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área especificada.
Cómo configurar el navegador para manejar automáticamente desbordamiento
Este ejemplo muestra cómo configurar el navegador para manejar automáticamente desbordamiento.
Cambiar el cursor
Este ejemplo muestra cómo cambiar el cursor.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Todas las propiedades CSS de posicionamiento
| Propiedad | Descripción |
|---|---|
| bottom | Establece el borde del margen inferior de una caja posicionada |
| clip | Clips de un elemento con posición absoluta |
| cursor | Especifica el tipo de cursor que se mostrará |
| left | Establece el límite del margen izquierdo de una caja colocada |
| overflow | Especifica lo que sucederá si el contenido desborda la caja de un elemento |
| overflow-x | Especifica qué hacer con los bordes izquierdo / derecho del contenido si se desborda el área de contenido del elemento |
| overflow-y | Especifica qué hacer con los bordes superior / inferior del contenido si se desborda el área de contenido del elemento |
| position | Especifica el tipo de posicionamiento para un elemento |
| right | Establece el límite del margen derecho para una caja posicionada |
| top | Establece el límite del margen superior para una caja posicionada |
| z-index | Establece el orden de apilamiento de un elemento |