CSS Posición (posicionamiento)
propiedad especifica la posición del tipo de elemento de posicionamiento.
Cinco valores de la propiedad position:
- estático
- relativo
- fijo
- absoluto
- pegajoso
Elemento se puede utilizar en la parte superior, inferior, propiedades de posición izquierda y derecha. Sin embargo, estos atributos no pueden funcionar a menos que la propiedad position se establece en primer lugar. También tienen diferentes formas de trabajar, dependiendo del método de posicionamiento.
posicionamiento estático
El valor por defecto para los elementos HTML, que no se encuentra, siga el flujo normal del objeto documento.
Estático colocado elementos, no siendo superior, inferior, izquierda, derecha influencia.
posicionamiento fijo
La posición del elemento con respecto a la ventana del navegador es una posición fija.
Incluso si la ventana está rodando no se mueve:
Nota: posicionamiento fijo en IE7 e IE8 Descripción necesidad DOCTYPE al apoyo !.
Fijado a localizar la posición del elemento de documento es independiente del flujo, y por lo tanto no ocupa espacio.
posicionamiento fijo y otros elementos se superponen.
posicionamiento relativo
Se coloca opuesto al elemento de posicionamiento con relación a su posición normal.
Ejemplos
En movimiento relativo elementos de posicionado, pero el espacio que había ocupado no cambia.
El posicionamiento relativo de los elementos se utiliza a menudo como posicionamiento absoluto recipiente elemento de bloque.
posicionamiento absoluto
Posición posicionamiento absoluto de los elementos con respecto al elemento padre posicionado más cercana, si el elemento no está ya posicionado elemento padre, entonces su posición relativa a la <html>:
posicionamiento absoluto con los elementos del documento de flujo independientes de la ubicación, y por lo tanto no ocupa espacio.
posicionamiento absoluto y otros elementos se superponen.
posicionamiento pegajosa
Inglés pegajosa literalmente pegajosa, adhesiva, pegajoso de modo que pueda ser llamado de posicionamiento.
Posición: pegajosa, basándose en una posición de rodadura del usuario localizar.
Colocación de la viscosidad depende de los elementos de rodadura del usuario en la posición: relativa y posición: fijo conmutación entre el posicionamiento.
Se comporta como posición: relative; y cuando la página se desplaza más allá de la zona objetivo, se comporta como posición: fijo; que será fijado en la posición objetivo.
Los elementos se colocan delante de rendimiento a través de un cierto umbral posicionamiento relativo, después de un posicionamiento fijo.
Este medio de una cierta parte superior umbral, derecha, abajo a la izquierda, o uno, en otras palabras, la parte superior designada, uno de la derecha, abajo a la izquierda o cuatro valores de umbral, la viscosidad antes del efecto de posicionamiento. De lo contrario, su comportamiento y el posicionamiento relativo de la misma.
Nota: Internet Explorer, Edge 15 y versiones anteriores de IE no soporta posicionamiento pegajosa. Safari requiere -webkit- prefijo (ver ejemplos más abajo).
Ejemplos
La superposición de elementos
Posicionamiento fluyen los elementos del documento no tiene nada que hacer, para que puedan cubrir otros elementos de la página
atributo z-index especifica el orden de apilamiento de un elemento (qué elemento debe ser colocado en el frente, o detrás)
el orden de apilamiento de un elemento puede tener efectos negativos o positivos:
Un elemento que tiene un orden de apilamiento superior es siempre en frente del elemento inferior del orden de apilamiento.
Nota: Si los dos elementos de posicionamiento se superponen, no especifique el z - índice, elemento de posicionamiento final en el código HTML se mostrará en la parte superior.
Todas las propiedades de posicionamiento CSS
"CSS" número de columna para indicar la versión de la definición de la propiedad que CSS (CSS1 o CSS2).
| propiedad | explicación | valor | CSS |
|---|---|---|---|
| fondo | Define el desplazamiento entre el límite exterior del elemento de posicionamiento comprende un bloque inferior de la con el mismo límite. | auto longitud % hereda |
2 |
| acortar | Clips un elementos posicionados absolutamente | de forma automática hereda |
2 |
| cursor | Visualizar el cursor en el tipo especificado | url automática punto de mira por defecto puntero de movimiento e-redimensionamiento ne-cambio de tamaño nw-cambio de tamaño n-cambio de tamaño se-cambio de tamaño sw-cambio de tamaño s-cambio de tamaño w-cambio de tamaño de texto de espera ayuda |
2 |
| izquierda | Se define el margen exterior de la frontera izquierda de elementos, incluyendo el desplazamiento entre el bloque y su límite izquierdo de orientación. | auto longitud % hereda |
2 |
| Desbordamiento |
Cuando el contenido del conjunto de elementos de lo que sucede cuando un desbordamiento de su área. | automático oculta de desplazamiento visibles heredan |
2 |
| desbordamiento-y |
Especificar cómo el contenido del borde superior / inferior del área de contenido de elementos de desbordamiento | automático oculta de desplazamiento visibles sin pantalla sin contenido |
2 |
| overflow-x |
Especificar cómo manejar el borde derecho / izquierdo del área de contenido del derrame del contenido de elementos | automático oculta de desplazamiento visibles sin pantalla sin contenido |
2 |
| posición | Especifica el tipo de elementos de posicionamiento | absoluto fijo en relación estática hereda |
2 |
| Correcto | Define un elemento de posicionamiento externo derecho comprende su desplazamiento desde el límite entre los bloques de borde derecho. | auto longitud % hereda |
2 |
| parte superior | Define un elemento de posicionamiento en el exterior desde el límite de su bloque que contiene desplazamiento entre los límites. | auto longitud % hereda |
2 |
| z-index | se proporciona el orden de apilamiento de los elementos | número de automóviles hereda |
2 |