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.
Há 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;Nota: O Internet Explorer suporta o valor fixo somente se um DOCTYPE é especificado!
top:30px;
right:5px;
}
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;
}
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>:
h2Elementos posicionados absolutamente são removidos do fluxo normal. Os documentos e outros elementos comportam-se como o elemento posicionado absolutamente não existe.
{
position:absolute;
left:100px;
top:150px;
}
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).
imgUm elemento com maior ordem de pilha está sempre na frente de um elemento com uma ordem inferior.
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
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
Obrigada pela dica! Foi bastante útil!
ResponderExcluirInformações muito uteis de CSS. Muito obrigado por ter postado essa contribuição.
ResponderExcluirRelative Simples e Absolute úteis. lol
ResponderExcluiró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!
ResponderExcluirQueria 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
Muito bom!!!
ResponderExcluirVlw kra! Me salvou!
vl
ResponderExcluirvl = obrigado, valeu,...
ResponderExcluirParabéns! simples e objetivo!
ResponderExcluir