Você pode usar o posicionamento absoluto para criar o layout da página anHTML5 e CSS3. Este processo envolve alguns trade-offs. Você tende a obter um melhor controle de sua página com posicionamento absoluto (em comparação com técnicas flutuantes), mas o layout absoluta requer mais planejamento e mais atenção aos detalhes.

A técnica para criar uma disposição posicionado de forma absoluta é semelhante à técnica de flutuação (no sentido geral).

Visão geral da disposição absoluta

Antes de começar a colocar sua página juntamente com o posicionamento absoluto, é bom para planejar todo o processo. Aqui está um exemplo de como o processo deve ir:

1. Planejar o site.

   Ter um desenho que especifica como o seu layout do site vai olhar é realmente importante. Em posicionamento absoluto, o seu planejamento é ainda mais importante do que os desenhos flutuantes, porque você vai precisar especificar o tamanho ea posição de cada elemento.

2. Especificar uma dimensão global.

   Este tipo particular de disposição tem um tamanho fixo. Criar um todos div abrigando todos os outros elementos e especificar o tamanho desta div (em uma unidade fixa, por agora, normalmente px ou em).

3. Criar o HTML.

   A página HTML deve ter um div chamado para cada parte da página (por isso, se você tem cabeçalhos, colunas e rodapés, você precisa de uma div para cada).

4. Criar uma folha de estilo CSS.

   Os estilos CSS pode ser interna ou ligados, mas porque o posicionamento absoluto tende a exigir um pouco mais de marcação de flutuação, estilos externos são os preferidos.

5. Identificar cada elemento.

   É mais fácil ver o que está acontecendo se você atribuir uma borda colorida diferente para cada elemento.

6. Faça com que cada elemento posicionado de forma absoluta.

   Conjunto position: absolute na CSS para cada elemento no layout.

7. Especifique o tamanho de cada elemento.

   Colocou o altura e largura de cada elemento de acordo com o diagrama. (Você fez fazer um diagrama, certo?)

8. Determinar a posição de cada elemento.

   Use o esquerda e topo atributos para determinar onde cada elemento vai no layout.

9. Tune-up seu layout.

   Você provavelmente vai querer ajustar as margens e fronteiras. Você pode precisar fazer alguns ajustes para fazer tudo funcionar.

Como escrever o código HTML

O código HTML é bastante simples:

 
Layout com posicionamento absoluto
 

O arquivo HTML chama uma folha de estilo externa chamada absLayout.css.

Adicionar o CSS

O código CSS é um pouco longo, mas não muito difícil:

/ * AbsLayout.css * / # tudo {border: 1px preto de largura sólida: 800px; height: 600px; position: absolute-left: 0px; top: 0px;} # cabeça {border: 1px solid verde-position: ab- width: 800px; height: 100px; top: 0px; left: 0px; text-align: center -} # menu de {border: 1px solid red-position: absolute-width: 140px; height: 500px; top: 100px; left: 0px; padding-left: 5px; padding-right: 5px;} # content {border:-position azul 1px solid: absolute-width: 645px; height: 500px; top: 100px; left: 150px; padding-left: 5px; }

Um layout estático criado com o posicionamento absoluto tem algumas características importantes para manter em mente:

• Você está empenhada em posicionar tudo. Depois de começar a usar o posicionamento absoluto, você precisa usá-lo em todo o seu site. Todos os principais elementos da página requerem posicionamento absoluto porque o mecanismo de fluxo normal já não está no lugar.

  Você ainda pode usar o layout flutuante dentro um elemento com posição absoluta, mas todos os seus principais elementos (posição, colunas e footing) precisa ter posição absoluta se um deles faz.

• Você deve especificar o tamanho e posição. Com um layout flutuante, você ainda está incentivando uma certa quantidade de fluidez. Posicionamento absoluto significa que você está tomando a responsabilidade, tanto para a forma eo tamanho do cada elemento no layout.

• posicionamento absoluto é menos adaptável. Com essa técnica, você está muito bem ligado a uma largura da tela específica e altura. Você vai ter dificuldade em adaptar-se comprimidos e telefones celulares.

• Todas as larguras e alturas tem que somar. Ao determinar o tamanho da tela, todas as alturas, larguras, margens, preenchimento e fronteiras tem que somar, ou você vai ter alguns resultados estranhos. Quando você usa posicionamento absoluto, você é também susceptível de passar algum tempo de qualidade com a sua calculadora, descobrir todas as larguras e alturas.