CSS Position (posicionamiento)
positionLa propiedad se utiliza para especificar el método de posicionamiento de un elemento.
Los cinco valores comunes son los siguientes:
| Valor | Descripción | Ancla |
|---|---|---|
| static | Valor predeterminado, el elemento se organiza según el flujo normal del documento y no se ve afectado por top/right/bottom/left. | Ver ejemplo |
| relative | Se desplaza con respecto a su posición original, sin salir del flujo del documento. | Ver ejemplo |
| absolute | Se posiciona con respecto al ancestro posicionado más cercano (de lo contrario, con respecto a body), saliendo del flujo del documento. | Ver ejemplo |
| fixed | Se posiciona con respecto a la ventana del navegador; su posición no cambia al desplazar la página. | Ver ejemplo |
| sticky | Antes de desplazarse a la posición especificada se comporta como relative, y después como fixed. | Ver ejemplo |
Los elementos puedentop、right、bottomyleftajustar su posición mediante las propiedades, pero estas propiedades solo se aplican si se ha establecidoposition(y el valor no esstatic). Las diferentes formas de posicionamiento afectan el objeto de referencia y el comportamiento de estas propiedades.
Posicionamiento static
Es el valor predeterminado de los elementos HTML, es decir, no tienen posicionamiento y siguen el flujo normal del documento.
Los elementos con posicionamiento estático no se ven afectados por top, bottom, left, right.
Posicionamiento fixed
La posición del elemento es fija en relación con la ventana del navegador.
No se mueve incluso si la ventana se desplaza:
Nota:El posicionamiento fixed requiere la declaración !DOCTYPE para ser compatible con IE7 e IE8.
El posicionamiento fixed hace que la posición del elemento sea independiente del flujo del documento, por lo que no ocupa espacio.
Los elementos con posicionamiento fixed se superponen con otros elementos.
Posicionamiento relative
La posición de un elemento con posicionamiento relativo es relativa a su posición normal.
Ejemplo
Pruébalo »
Al mover un elemento con posicionamiento relativo, el espacio que ocupaba originalmente no cambia.
Los elementos con posicionamiento relativo se usan a menudo como bloque contenedor para elementos con posicionamiento absoluto.
Posicionamiento absolute
La posición de un elemento con posicionamiento absoluto es relativa al elemento padre posicionado más cercano; si el elemento no tiene un padre posicionado, su posición es relativa a <html>:
El posicionamiento absolute hace que la posición del elemento sea independiente del flujo del documento, por lo que no ocupa espacio.
Los elementos con posicionamiento absolute se superponen con otros elementos.
Posicionamiento sticky
sticky significa literalmente "pegajoso" o "adhesivo" en inglés, por lo que se puede llamar posicionamiento adhesivo.
position: sticky;Se posiciona según la posición de desplazamiento del usuario.
Los elementos con posicionamiento adhesivo dependen del desplazamiento del usuario y cambian entreposition:relativeyposition:fixedposicionamientos.
Su comportamiento es comoposition:relative;y cuando la página se desplaza más allá del área objetivo, se comporta comoposition:fixed;, se fija en la posición objetivo.
El posicionamiento del elemento se comporta como relativo antes de cruzar un umbral específico, y como fijo después.
Este umbral específico se refiere a uno de top, right, bottom o left. En otras palabras, solo se puede activar el posicionamiento adhesivo especificando uno de los cuatro umbrales top, right, bottom o left; de lo contrario, su comportamiento es el mismo que el posicionamiento relativo.
Nota:Internet Explorer, Edge 15 y versiones anteriores de IE no admiten el posicionamiento sticky. Safari requiere el prefijo -webkit- (consulta el siguiente ejemplo).
Ejemplo
Pruébalo »
Elementos superpuestos
El posicionamiento de los elementos es independiente del flujo del documento, por lo que pueden cubrir otros elementos de la página.
La propiedad z-index especifica el orden de apilamiento de un elemento (qué elemento debe estar delante o detrás).
Un elemento puede tener un orden de apilamiento positivo o negativo:
Los elementos con un orden de apilamiento más alto siempre están delante de los elementos con un orden de apilamiento más bajo.
Nota:Si dos elementos posicionados se superponen y no se especifica z-index, el elemento posicionado más tarde en el código HTML se mostrará al frente.
Más ejemplos
Recortar la forma de un elemento
Este ejemplo muestra cómo establecer la forma de un elemento. El elemento se recorta con esa forma y se muestra.
Cómo usar una barra de desplazamiento para mostrar el contenido desbordado dentro de un elemento.
Este ejemplo demuestra cómo la propiedad overflow crea una barra de desplazamiento y cómo configurarla cuando el contenido de un elemento es demasiado grande para el área especificada.
Cómo configurar el manejo automático de desbordamiento del navegador
Este ejemplo muestra cómo configurar el navegador para manejar automáticamente el desbordamiento.
Este ejemplo muestra cómo cambiar el cursor.
Todas las propiedades de posicionamiento CSS
El número en la columna "CSS" indica qué versión de CSS (CSS1 o CSS2) define la propiedad.
| Propiedad | Descripción | Valor | CSS |
|---|---|---|---|
| bottom | Define el desplazamiento entre el borde del margen inferior de un elemento posicionado y el borde inferior de su bloque contenedor. | auto length % inherit |
2 |
| clip | Recorta un elemento con posicionamiento absoluto. | shape auto inherit |
2 |
| cursor | Muestra el cursor del tipo especificado. | 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 | Define el desplazamiento entre el borde del margen izquierdo de un elemento posicionado y el borde izquierdo de su bloque contenedor. | auto length % inherit |
2 |
| overflow |
Establece lo que sucede cuando el contenido de un elemento desborda su área. | auto hidden scroll visible inherit |
2 |
| overflow-y |
Especifica cómo manejar el desbordamiento del contenido en los bordes superior/inferior del área de contenido del elemento. | auto hidden scroll visible no-display no-content |
2 |
| overflow-x |
Especifica cómo manejar el desbordamiento del contenido en los bordes derecho/izquierdo del área de contenido del elemento. | auto hidden scroll visible no-display no-content |
2 |
| position | Especifica el tipo de posicionamiento de un elemento. | absolute fixed relative static inherit |
2 |
| right | Define el desplazamiento entre el borde del margen derecho de un elemento posicionado y el borde derecho de su bloque contenedor. | auto length % inherit |
2 |
| top | Define el desplazamiento entre el borde del margen superior de un elemento posicionado y el borde superior de su bloque contenedor. | auto length % inherit |
2 |
| z-index | Establece el orden de apilamiento de un elemento. |
number auto inherit |
2 |