El extremo frontal (F) - CSS flotante y el posicionamiento de

1. Flotador

• Definición: el elemento es un atributo, conjunto de elementos de atributos flotarán el flujo de documento de normas de control , movimiento para el elemento de matriz posición especificada en el proceso, permitiendo que cualquier casete en una fila están dispuestos para flotador con el diseño.
• flujo de documentos estándar : flujo de documentos se refiere al proceso de diseño elemento de diseño de los elementos se dejan automáticamente a derecha, de arriba a disposición de flujo inferior . Y finalmente dividida formulario de arriba a línea de fondo, y la descarga de los elementos de izquierda a derecha en cada fila. Resultando en blanco se dobla, altura desigual, la alineación y la envoltura inferior y así sucesivamente.
• Formato: selector {float: Valor de la propiedad;}
  Valor de la propiedad: elementos flotantes izquierda- abajo izquierda, derecha - elementos flotantes a la derecha; none-- elementos no flotan (por defecto)
• Características: ① del flujo estándar, no tiene en cuenta la ubicación, sólo alrededor flotante ; ② flotante crea un conceptuales comprende a nivel de bloque, la adición de una caja padre en el exterior, y luego alineados; ③ si uno los elementos flotantes están alineados con ella en la parte superior, si un elemento de flujo estándar está dispuesto verticalmente.
• Elementos en bloque : una línea separada como h1 ~ h6 p div ... Lista de
  elementos en línea : una línea separada no se abarcan un fuerte ... img
  elementos en línea pueden incluirse en el elemento en bloque, no a la inversa
• La pantalla : elementos de bloque mostrados como Bloque / fila en línea de los elementos de elemento de visualización / inline-block se muestran como bloques, pero pueden ser en línea, no se muestra en a / elemento ninguna fila
• Los ejemplos de presentación
  
  

2. El colapso de los problemas de la frontera de los padres

• claro: Claro flotador
  claro: la derecha, elementos flotantes a la derecha permitió
  clear: left; elementos flotantes izquierda permitió
  clear: both; ambos elementos flotantes permitió
  clara: ninguno; sin elemento flotante

Solución:
(1) el aumento de la altura del elemento padre

(2) para aumentar una etiqueta div vacío, flotado transparente

(3) un aumento en el elemento de desbordamiento de los padres: oculto;

(4). Padre poner una pseudo-clase: después de

• Resumen
  (1) Ajuste el elemento padre altura: sencillo, con una altura fija elemento asuma, será restringido;
  aumento div volver vacío (2) elementos flotantes: sencilla, para evitar el espacio de código;
  overflow: simple, (3). evitar el uso de desplegable algunos escenarios;
  (4) la clase padre para agregar una pseudo-clase: Después de ( recomendada ): escribir un poco más complicado, pero no tiene efectos secundarios.

3. El posicionamiento relativo

• Los valores comunes de posición de propiedad: posicionamiento automático static-- (por defecto); posicionamiento relativo relative--; posicionamiento absoluto absolute--; posicionamiento fixed-- fijo
• position: relative ;
• Propiedades offset: Top - Top offset; inferiores - compensaciones de fondo; izquierda - desplazamiento a la izquierda; derecho - derecho de compensación
• Con respecto a la posición original, especificando un desplazamiento , a continuación, el posicionamiento relativo, es sin embargo en cualquier corriente de documento, la posición original se conserva .
• El código de ejemplo
  
• Los resultados operativos
  

4. El posicionamiento absoluto

• position: absolute
• Localización: Basado xxx posicionamiento, vertical y horizontalmente (superior, inferior, izquierda, derecha)
  (. 1) no elemento padre posicionado bajo la premisa, el navegador con respecto ;
  (2) suponiendo que el elemento padre existe posicionada , por lo general Respetamos elemento padre compensado ;
  (3) se mueve dentro del alcance del elemento padre .
  En relación con el padre o el navegador desplazamiento especificado, el posicionamiento absoluto, entonces no es en el flujo estándar del documento, no se conservará la posición original .
• El código de ejemplo
  
• Los resultados operativos
  

El posicionamiento fijo

• posición: fijo
• La posición del elemento con respecto a la ventana del navegador es una posición fija
  

6. z-index

• El posicionamiento de los elementos del documento sin tener en cuenta el flujo , por lo que pueden cubrir otros elementos de la página
  atributo especifica z-index del orden de apilamiento de un elemento (qué elemento debe colocarse delante o detrás)
  z-index -------- Número / Auto: -------- orden de apilamiento de elementos valores dispuesta
  Z-index: por defecto es 0, el más alto ilimitado

• transparencia de opacidad valores de atributos a partir de 0,0 - 1,0 . Cuanto menor sea el valor , de modo que el elemento más transparente . Es para todo el elemento , una vez que el juego de transparencias, el color de fondo, color de texto tiene la transparencia.

• El código de ejemplo
  

• Los resultados operativos