0

Posicionamento de Elementos

cssPosicionando Elementos

O posicionamento de elementos tem como função dar o controle sobre o resultado visual de uma página.O CSS utiliza quatro tipos de posicionamento, os quais são:

  • Absolute
  • Relative
  • Static
  • Fixed

Todos os exemplos mostrados a seguir serão modelados utilizando a tag <div>.

Fluxo Normal

O termo fluxo normal refere-se ao comportamento padrão do navegador. Como você certamente percebeu, todo posicionamento “defaults” geralmente esta à esquerda do navegador, salvo aqueles modificados pela HTML ou CSS.
Os elementos “in-line” seguem com o fluxo. Se você redimensionar o navegador ou a resolução do monitor eles simplesmente irão se realocar, mas permanecerão no mesmo fluxo sem quebrar a linha, no caso, o parágrafo.

Posicionamento Absoluto

Todo elemento posicionado de forma absoluta não ocupará um espaço no documento.

Exemplo:

img01

 <div> com posição absoluta de 25px ao topo e a esquerda

Posição Relativa

O posicionamento relativo é muitas vezes confuso, primeiramente porque levanta a questão: relativo a quê? As maiorias das pessoas acham que a posição seria algo relativo a outro elemento.
Posicionamentos relativos em caixas são utilizados para o fluxo normal. Isto significa que elas não são removidas do fluxo normal de maneira absoluta na caixa onde está posicionado.
No exemplo abaixo será removida todas as margens usando o seletor universal (*). Isto foi feito para livrar-nos de todos os padrões em branco para que você possa ver exatamente como a posicionamento relativo está sendo usado.

Exemplo:

Portanto, a <div> está afastada 10 pixels a partir do elemento anterior, e 45 pixels à esquerda do fluxo exato do mesmo local onde o texto começa, pois é também no fluxo normal. Você vê que é o fluxo contínuo pelo posicionamento; daí o conteúdo flui como deveria, tanto antes como depois da caixa relativamente posicionada.

img02

O posicionamento relativo é utilizado quando o fluxo normal não deve ser quebrado. O posicionamento absoluto é mais bem usado para itens que devem ser posicionados muito especificamente.

Posição Fixa

A posição fixa é uma peça brilhante no CSS. Mas infelizmente não é suportada pelo internet explorer, podendo ser usada somente com Mozilla, Konqueror, Opera, Safari e outro que por ventura venha a oferecer esse suporte.

O posicionamento Fixo permite a você colocar uma caixa em qualquer lugar na página, atuando quase como que uma janela flutuante. Diferente do posicionamento absoluto em que elementos fixos são posicionados em relação a sua área de visão.

Exemplo:

img03

Paulo R. Marinho

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

+ 42 = 46