CSS posicionamiento (posicionamiento)
a veces posicionamiento muy difícil!
Elegir si desea mostrar en frente de los elementos!
Los elementos pueden superponerse!
Posicionamiento (posicionamiento)
propiedades de posición CSS le permiten localizar un elemento. También puede ser un elemento en otro elemento de atrás, y especificar un elemento de contenido es demasiado grande, lo que debería ocurrir.
Los elementos pueden ser utilizados en la parte superior, inferior, izquierdo y atributos posicionamiento correcto. Sin embargo, estas propiedades no funcionarán a menos que la propiedad de posición se establece en primer lugar. También tienen diferentes formas de trabajo, en función del método de posicionamiento.
Hay cuatro métodos de posicionamiento diferentes.
posicionamiento estático
elementos HTML por defecto, que no se encuentran, los elementos aparecen en la corriente normal.
elementos de posicionamiento estático no será superior, inferior, izquierda, derecha influencia.
El posicionamiento fijo
Posición del elemento con relación a la ventana del navegador es una posición fija.
Incluso cuando la ventana está rodando no se mueve:
Nota: posicionamiento fijoen IE7 e IE8 Descripción DOCTYPE necesitan para apoyar!
posicionamiento fijo de la posición de los elementos del documento independiente del flujo, y por lo tanto no ocupa espacio.
elementos posicionados fijos y otros elementos se superponen.
El posicionamiento relativo
elemento de posicionamiento relativo se coloca en relación con su posición normal.
Ejemplos
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Trate »
Se puede mover la posición relativa de los elementos de contenido y elementos superpuestos, no cambia el espacio original ocupada.
elemento de posicionamiento relativo se utiliza a menudo como un bloque contenedor de elementos con posición absoluta.
El posicionamiento absoluto
Posición posicionamiento absoluto de los elementos en relación con el elemento padre posicionado más cercana, si el elemento no está ya posicionado elemento padre, su posición relativa a la <html>:
Absolutamente colocado de modo que la posición de los elementos del documento independiente del flujo, y por lo tanto no ocupa espacio.
elementos con posición absoluta y otros elementos se superponen.
elementos superpuestos
La orientación y el flujo independiente de los elementos del documento, por lo que puede cubrir otros elementos de la página
atributo z-index especifica el orden de apilamiento de un elemento (qué elemento debe ser colocado por delante o por detrás)
Elemento puede tener una orden de apilamiento positivo o negativo de:
Element tiene un orden más alto de apilamiento está siempre en frente de la orden de apilamiento inferior de elementos.
Nota: Si dos elementos posicionados superponen, no especifique el z - índice, la colocación final de los elementos en el código HTML se mostrará en la parte superior.
más ejemplos
Dar forma a elementos de corte
Este ejemplo muestra cómo configurar la forma del elemento. El elemento se recorta en esta forma, y se muestra.
Este ejemplo demuestra la propiedad de desbordamiento para crear una barra de desplazamiento, cuando el contenido de un elemento en el área designada es demasiado grande, cómo configurar para acomodar.
Cómo configurar el navegador para manejar automáticamente desbordamiento
Este ejemplo muestra cómo configurar el navegador para manejar automáticamente desbordamiento.
Este ejemplo muestra cómo cambiar el cursor.
Todas las propiedades de posición CSS
"CSS" columna indica la versión de la definición de la propiedad de número, que CSS (CSS1 o CSS2).
| propiedad | explicación | valor | CSS |
|---|---|---|---|
| fondo | Offset define el límite entre la frontera de margen inferior y sus elementos de orientación que contienen el bloque siguiente. | auto longitud % heredar | 2 |
| presilla | Clips de un elementos con posición absoluta | forma auto heredar | 2 |
| cursor | Mover el cursor para mostrar el tipo especificado | url auto punto de mira defecto puntero movimiento e-cambio de tamaño 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 texto esperar ayudar | 2 |
| izquierda | Define el desplazamiento de elementos de orientación izquierda margen de límite de bloque entre el borde izquierdo de su contenedor. | auto longitud % heredar | 2 |
| desbordamiento | Cuando el contenido del Conjunto de elementos de lo que sucede cuando se desbordó su región. | auto oculto voluta visible heredar | 2 |
| desbordamiento-y | Especifica cómo manejar el contenido del borde superior / inferior del área de contenido del elemento de desbordamiento | auto oculto voluta visible sin pantalla sin contenido | 2 |
| desbordamiento-x | Especifica cómo manejar a la derecha / borde izquierdo del área de contenido del desbordamiento contenido del elemento | auto oculto voluta visible sin pantalla sin contenido | 2 |
| posición | Especificar el tipo de elementos de posicionamiento | absoluto fijo relativo estático heredar | 2 |
| derecho | En él se definen los elementos de orientación que comprenden el borde derecho y sus desplazamientos de margen entre el borde derecho del bloque. | auto longitud % heredar | 2 |
| top | Define un elemento de posicionamiento en la frontera y que su margen en el bloque contiene el desplazamiento entre los límites. | auto longitud % heredar | 2 |
| z-index | Configuración del orden de apilamiento de elementos | número auto heredar | 2 |