Se puede utilizar el posicionamiento absoluto para crear anHTML5 y CSS3 diseño de la página. Este proceso implica algunas ventajas y desventajas. Que tienden a obtener un mejor control de su página con el posicionamiento absoluto (en comparación con las técnicas de flotación), pero de disposición absoluta requiere más planificación y más atención a los detalles.

La técnica para la creación de un diseño de posición absoluta es similar a la técnica de flotación (en el sentido general).

Descripción general de disposición absoluta

Antes de empezar a poner su página junto con el posicionamiento absoluto, es bueno para planificar todo el proceso. He aquí un ejemplo de cómo el proceso debe ir:

1. Planificar el sitio.

   Tener un dibujo que especifica cómo el diseño del sitio se verá que es realmente importante. En la posición absoluta, su planificación es aún más importante que los diseños flotantes, dado que tiene que especificar el tamaño y la posición de cada elemento.

2. Especificar un tamaño total.

   Video: Aprende HTML5 y CSS3 - El Posicionamiento Absoluto y Relativo - Video 21

   Este tipo particular de diseño tiene un tamaño fijo. Crear un todas div que aloja todos los otros elementos y especificar el tamaño de este div (en una unidad fija por ahora, por lo general px o em).

3. Crear el HTML.

   La página HTML debe tener un div con nombre para cada parte de la página (por lo que si usted tiene encabezados, columnas y pies de página, se necesita un div para cada uno).

4. Construir una hoja de estilos CSS.

   Los estilos CSS pueden ser internas o vinculados, sino porque el posicionamiento absoluto tiende a requerir un poco más de marcado de flotar, se prefieren los estilos externos.

5. Identificar cada elemento.

   Es más fácil ver lo que está pasando si asigna un borde de color diferente a cada elemento.

6. Hacer que cada elemento con posición absoluta.

   Conjunto position: absolute en el CSS para cada elemento en el diseño.

7. Especificar el tamaño de cada elemento.

   Selecciona el altura y anchura de cada elemento de acuerdo con su diagrama. (Tú hizo hacer un diagrama, ¿verdad?)

8. Determinar la posición de cada elemento.

   Utilizar el izquierda y parte superior atributos para determinar dónde va cada elemento en el diseño.

9. Puesta a punto de su trazado.

   Es probable que desee para ajustar los márgenes y fronteras. Es posible que tenga que hacer algunos ajustes para hacer que todo funcione.

Cómo escribir el código HTML

El código HTML es bastante sencillo:

Disposición con el posicionamiento absoluto

El archivo HTML llama una hoja de estilo externa llamada absLayout.css.

Añadir la CSS

El código CSS es un poco largo, pero no es demasiado difícil:

/ * AbsLayout.css * / # todo {border: sólido negro-anchura de 1 píxel: 800px; altura: 600px; position: absolute-left: 0px; top: 0px;} # cabeza {border: posición verde sólido 1px: absoluto- anchura: 800px; altura: 100px; top: 0px; left: 0px; text-align: center -} # menú {border: 1px sólido de color rojo-position: absolute-width: 140px; altura: 500px; top: 100px; izquierda: 0px; padding-left: 5px; padding-right: 5px;} # contenido {border: posición azul sólido 1px: absoluta-width: 645px; altura: 500px; top: 100px; izquierda: 150 píxeles; padding-left: 5px; }

Una disposición estática creada con el posicionamiento absoluto tiene una serie de características importantes a tener en cuenta:

• Usted está comprometido a colocar todo. Después de empezar a utilizar el posicionamiento absoluto, es necesario usarlo en todo su sitio. Todos los principales elementos de la página requieren posicionamiento absoluto debido a que el mecanismo de flujo normal ya no está en su lugar.

  Puede seguir utilizando el diseño flotante dentro un elemento con posición absoluta, pero todos sus elementos principales (epígrafe, columnas y zapatas) necesita tener la posición absoluta si uno de ellos lo hace.

• Se debe especificar el tamaño y posición. Con un diseño flotante, todavía estás fomentando una cierta cantidad de fluidez. El posicionamiento absoluto significa que usted está tomando la responsabilidad por la forma y el tamaño de cada elemento en el diseño.

• El posicionamiento absoluto es menos adaptable. Con esta técnica, que está bastante limitado para un ancho de pantalla específico y la altura. Vas a tener problemas para adaptarse a las tabletas y los teléfonos celulares.

• Todas las anchuras y las alturas tienen que sumar. Al determinar el tamaño de la pantalla, todas las alturas, anchuras, márgenes, rellenos y bordes tienen que sumar, o tendrá que obtener algunos resultados extraños. Cuando se utiliza el posicionamiento absoluto, eres también es probable que pasar algún tiempo de calidad con su calculadora, calcular todas las anchuras y las alturas.