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.

image0.jpg

Como configurar o HTML

O código não é surpreendente:

boxes.html

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

Como adicionar diretrizes de posição

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

image1.jpg

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

absPosition.html

Então, por que você se importa se as caixas se sobrepõem? Bem, talvez você não se importa, mas a parte interessante é esta: Você pode ter controle muito mais preciso sobre onde elementos viver e que tamanho 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 o 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 {background-color: blue-width: 100px; height: 100px; position: absolute-left: 0px; top: 0px; margin: 0px;}

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

    O 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á. Isso pode ser especificado com qualquer uma das unidades de medida, mas é normalmente medido 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:

     top: 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:

     width: 100px; height: 100px;

  5. Defina as margens para 0.

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

     margin: 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. O posicionamento absoluto funciona em apenas um elemento de cada vez.

Semelhante

menu