Como usar o posicionamento absoluto para html5 e css3 programação

Vamos começar a aventura posicionamento absoluto, considerando o mecanismo de layout padrão. Aqui, você pode ver uma página HTML5 com dois parágrafos sobre ele. Você pode usar CSS para dar cada parágrafo de uma cor diferente e para definir uma altura e largura específica. O posicionamento é deixada para o gerenciador de layout padrão, o que posiciona o segundo parágrafo (preto) diretamente abaixo do primeiro (azul) um.

Como configurar o HTML

O código é surpreendente:

Se você não fornecer mais orientações, parágrafos (como outros elementos nível de bloco) tendem a proporcionar retornos de carro antes e depois de si, empilhando em cima uns dos outros. As técnicas de layout padrão garantir que nada se sobrepõe.

Como adicionar diretrizes de posição

Confira algo novo: Os parágrafos são sobrepostos!

Essa façanha é realizada através de alguns novos atributos CSS:

Então, por que você se importa se as caixas se sobrepõem? Bem, você pode não se importa, mas a parte interessante é esta: Você pode ter controle muito mais preciso sobre onde elementos viver e qual o tamanho que eles são. Você pode até mesmo substituir tendência normal do navegador para manter elementos de sobreposição, o que lhe dá algumas opções interessantes.

Como fazer trabalho de posicionamento absoluto

Algumas novas partes do CSS permitir que este controle mais direto do tamanho e da posição destes elementos. Aqui está o CSS para uma das caixas:

 #blueBox {cor de fundo: azul de largura: 100 p; altura: 100 p; posição: absoluta-esquerda: 0px; topo: 0px; margem: 0px;}

1. Colocou o posição atribuir a absoluto.

   posicionamento absoluto pode ser utilizado para determinar exactamente (mais ou menos) em que o elemento irá ser colocado sobre a tela:

   
   
   
   

    posição: ab-

2. especificar um esquerda posição no CSS.

   Depois de determinar que um elemento terá absoluto posição, ele é removido do fluxo normal, assim que você é obrigado a corrigir a sua posição. o esquerda atributo determina onde a borda esquerda do elemento irá. Isto pode ser especificado com qualquer uma das unidades de medição, mas é tipicamente medida em pixels:

    left: 0px;

3. especificar um topo posição com CSS.

   O atributo indica onde o topo do elemento irá. Novamente, isso é normalmente especificado em pixels:

    superior: 0px;

4. Use o altura e largura atributos para determinar o tamanho.

   Normalmente, quando você especificar uma posição, você também quiser determinar o tamanho:

    largura: 100 p; altura: 100 p;

5. Defina as margens para 0.

   Quando você estiver usando posicionamento absoluto, você está exercendo um pouco de controle. Porque os navegadores não tratam margens de forma idêntica, é melhor definir margens para 0 e controlar o espaçamento entre os elementos manualmente:

    margem: 0px;

Geralmente, você usa posicionamento absoluto somente em elementos nomeados em vez de classes ou tipos de elementos gerais. Por exemplo, você não vai querer todos os parágrafos em uma página para ter o mesmo tamanho e posição, ou você não pode vê-los todos. posicionamento absoluto funciona em apenas um elemento de cada vez.