Posicionamento de div em CSS


As propriedades de posicionamento CSS permitem a posição de um elemento. Também podemos colocar um elemento atrás do outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande.

Os elementos podem ser posicionados com as propriedades top, bottom, left e right. No entanto, essas propriedades não funcionaram a menos que a propriedade position seja definida em primeiro lugar. Eles também funcionam de forma diferente dependendo do método de posicionamento.

quatro diferentes métodos de posicionamento:


Static Position

Elementos HTML são estáticos posicionados por padrão. Um elemento estático posicionado sempre é posicionado de acordo com o fluxo normal da página.
Elementos estáticos posicionados não são afetados por cima (top), em baixo (bottom), esquerda(left), direita (right).
 

Fixed Position 
Um elemento com posição fixa é posicionado em relação à janela do navegador.
Não vai mudar, mesmo que a janela seja rolada:


p.pos_fixed{ 
position:fixed;
top:30px;
right:5px;
}   
 Nota: O Internet Explorer suporta o valor fixo somente se um DOCTYPE é especificado!
Elementos com posicionamento fixo são removidos do fluxo normal. Os documentos e outros elementos se comportam como se o elemento fixo posicionado não exista. E podem sobrepor-se outros elementos.

Relative position 

Um elemento posicionado com relative é posicionado em relação à sua posição normal.
 
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
 O conteúdo de elementos relativamente posicionados pode ser movido e se sobrepõe a outros elementos, mas o espaço reservado para o elemento ainda é preservada no fluxo normal.
h2.pos_top
{
position:relative;
top:-50px;
}

Absolute Position 

Um elemento de posição absoluta é posicionado em relação ao primeiro elemento pai que tem uma posição que não seja estática. Se nenhum elemento for encontrado, o bloco é <html>:

h2
{
position:absolute;
left:100px;
top:150px;
} 
 Elementos posicionados absolutamente são removidos do fluxo normal. Os documentos e outros elementos comportam-se como o elemento posicionado absolutamente não existe.

Elementos Sobrepostos (z-index)

Quando os elementos estão posicionados fora do fluxo normal, eles podem se sobrepor outros elementos.
A propriedade z-index especifica a ordem da pilha de um elemento (elemento que deve ser colocado na frente ou de trás, os outros).

 
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
Um elemento com maior ordem de pilha está sempre na frente de um elemento com uma ordem inferior.
 
Nota: Se dois elementos posicionados sobreposição, sem um z-index especificado, o último elemento posicionado no código HTML será mostrado no topo.


Inspiração: W3schools

8 comentários:

  1. Obrigada pela dica! Foi bastante útil!

    ResponderExcluir
  2. Informações muito uteis de CSS. Muito obrigado por ter postado essa contribuição.

    ResponderExcluir
  3. Relative Simples e Absolute úteis. lol

    ResponderExcluir
  4. ótimo post Júnior... mas tenho uma dúvidazinha sobre o post e fora do post... estou tentando recriar este estilo de menu que você usa no seu blog, esse estilo em que a div do menu sai de dentro do outer-wrapper e que nas bordas da direita e esquerda tem essa imagem estilo 3d!

    Queria saber como faço para posicionar a div do menu para fora do outer-wrapper e como add as imagem 3d do menu. Será que tem alguma solução aí pra mim?? Obrigado pela atenção :D

    ResponderExcluir
  5. vl = obrigado, valeu,...

    ResponderExcluir