Detallado y posicionamiento de varias aplicaciones en CSS

posicionamiento css

Hay tres básica mecanismo de posicionamiento CSS: el flujo general, el flujo de flotabilidad, el flujo de posicionamiento.
En el que:
la corriente normal: de arriba a abajo, de izquierda a derecha
flujo flotabilidad: Añadido elemento flotador:;
flujo de bits: Añadido propiedades de posición

Uno de los elementos en el flujo de documentos:

1. Cuando el flujo de los elementos del documento en lugar, de los elementos en el documento ignora la corriente
2. elementos de flujo de documento en el cálculo de la altura automática ignorados fuera de los elementos en el flujo de documentos

Posicionamiento manera: Posición

valores de las propiedades de posición:

• coordenadas ajuste predeterminado estáticas no son válidas
• absoluta posicionamiento absoluto
  1: desde el flujo de documentos, no ocupa la posición
  2: Punto de referencia por defecto 00 html (navegador cero)
  3: Si usted tiene un padre, y el padre de un posicionamiento, que se referiría al elemento padre (a excepción de posicionamiento por defecto) bastante en referencia a los subelementos de los mismos designados
  propósitos: la necesidad de la superposición en la página se puede utilizar el posicionamiento donde absoluta
• relativo: el posicionamiento relativo de
  1: ocupando corriente documento, que representa la posición
  2: con referencia a su posición en la página de carga
  fines: principalmente para proporcionar bloques que comprende el posicionamiento absoluto
• fijo: posicionamiento fijo
  1: desde el flujo de documentos, no ocupando
  2: Elementos con la página de desplazamiento y estacionaria de desplazamiento a la página, barras de desplazamiento se verán afectados por el impacto.
  03:00 punto de navegador de referencia
  utiliza: en la página con una ventana gráfica con elementos móviles (por ejemplo, de nuevo a la parte superior)
• Adherido: pegajoso Ubicación
  1: la página llega a una cierta altura, desde el flujo de documentos
  2: adsorción efecto superior navegador

posición de las coordenadas

• Horizontal derecha izquierda
• parte inferior parte superior Vertical

El posicionamiento absoluto y relativo de diferencia

1, una referencia diferente, la referencia absoluta que comprende la colocación de bloque (elemento padre dirigida), está colocado opuesto al elemento de referencia en sí Ubicación predeterminada;
2, el posicionamiento absoluto de los objetos fuera del flujo del documento y por lo tanto no toma espacio, posicionamiento relativo no interrumpe el flujo normal del documento, independientemente de si la orden de moverse, los elementos todavía ocupan el espacio original.

Los siguientes son los posicionamiento absoluto y relativo del mapa detallada:

jerarquía elemento de posicionamiento

z-index: auto | número

orden de recuperación o de apilamiento del objeto.
Auto: por defecto.
número: valor entero sin unidades puede ser negativo.

1. no se establece z-índice, y finalmente escribir el objeto está representada en la capa superior proporcionada preferentemente, mayor es el valor, más en contra de la capa superior;
2. z-index puede ser negativo, si es negativo, los flujos de la rutina encontró, elementos flotantes, que serán cubiertos
3. El elemento (color) aparecen superpuestas, a la que el elemento frontal (color), cuyo elemento (color) a la, el conjunto de índice z trasera, mayor es el valor de la parte delantera

elementos de posicionamiento centrado camino

Una manera:

	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;

Segunda manera:

	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;

posicionamiento Precauciones

1. Un elemento, siempre que la posición del valor no es estática, considerado el elemento es elementos posicionados
2. Caja de compensación no tendrá ningún impacto en otras cajas
3. El elemento de posicionamiento se proporciona sólo es eficaz z-index
4. Absolute posicionamiento absoluto elemento, posicionamiento fijo debe fijarse cajas de bloque
5. Posicionamiento absoluto elementos absolutos, posicionamiento fijo fijos no debe flotador
6. El margen es ninguna fusión

elementos de posicionamiento Aplicación

Hay elementos de una relación jerárquica (de posicionamiento relativo y de posicionamiento absoluto):

foto efecto de ampliación corriente (posicionamiento absoluto):

menú secundario (posicionamiento absoluto):


el botón de página y el subtítulo imagen en la parte inferior del diagrama carrusel (posicionamiento absoluto):

cubierta de la pantalla de inicio de sesión capa de cubierta / pantalla completa (situado de manera fija):

barra lateral de navegación (situado de manera fija):

adsorbido en la parte superior de la navegación del navegador (viscosidad de posicionamiento):