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 absolutamente posicionado é 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. No 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. Especifique um tamanho total.

   Video: Aprenda a trabalhar com FlexBox • HTML5/CSS3

   Este tipo particular de layout 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 nomeado para cada parte da página (por isso, se você tiver cabeçalhos, colunas e rodapés, você precisa de uma div para cada).

4. Construir uma folha de estilo CSS.

   Os estilos CSS pode ser interna ou ligada, mas porque o posicionamento absoluto tende a exigir um pouco mais do que a marcação flutuante, estilos externos são preferidos.

5. Identificar cada elemento.

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

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

   Conjunto posição: absoluta na CSS para cada elemento no layout.

7. 
   
   
   

   Especificar 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 HTML

O código HTML é bastante simples:

Layout com posicionamento absoluto

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

Adicione o CSS

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

/ * AbsLayout.css * / # todos {fronteira: 1 pixel preto-largura sólido: 800 px; altura: 600px; posição: absoluta-esquerda: 0px; topo: 0px;} # cabeça {fronteira: 1 px sólido verde-posição: ab- width: 800px; height: 100px; top: 0px; left: 0px; text-align: center -} # menu de {border: 1px solid vermelho-position: absolute-width: 140px; height: 500px; top: 100px; left: 0px; padding-esquerda: 5px; padding-direita: 5px;} # conteúdo {fronteira:-posição azul sólido 1px: absoluta de largura: 645px; altura: 500 px; topo: 100 p; esquerdo: 150 pixels; padding-esquerda: 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 não é mais no lugar.

  Você ainda pode usar o layout flutuante dentro um elemento com posição absoluta, mas todos os seus principais elementos (título, 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 para se adaptar para tablets e celulares.

• Todas as larguras e alturas tem que somar. Quando você 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 é provável que passar algum tempo de qualidade com a sua calculadora, descobrir todas as larguras e alturas.