Diferença entre position: static, relative, absolute e fixed
Postado por: Pedro Rogério emNeste tutorial vamos aprender a diferença entre position: static, relative, absolute e fixed no CSS.
position: static
Esse é o valor default para todo elemento HTML, o que significa que o elemento não tem posicionamento definido e seu fluxo ocorre normalmente no documento HTML.
#div1 {position: static}
Não é necessário definir position:static para os elementos da página pois esse é o valor default.
position: relative
Especificando position:relative agora você pode utilizar top ou bottom, right ou left para posicionar os elementos na página em relação ao lugar que ele ocuparia no fluxo do documento.
#div1 {
position: relative;
top: 40px;
left: 20px;
}
Nesse exemplo posicionamos o elemento a 40px do topo e a 20px da esquerda em relação ao lugar que ele ocuparia no fluxo do documento. Vale lembrar que utilizando position:relative todo esse espaço que foi definido ainda continua sendo ocupado pelo elemento na página. Exemplo.
position: absolute
Utilizando position: absolute agora podemos posicionar exatamente nosso elemento em relação ao primeiro elemento pai com posição diferente de “static” numa sequência até parar no body.
#div1 {
position: absolute;
top: 40px;
right:0;
}
Vale lembrar que a patir do momento que utilizamos position: absolute ele perde a ordem no fluxo do documento e o espaço ocupado passa a não existir mais. Exemplo.
position:relative + position: absolute
Observem o seguinte código HTML:
<div id="div1"> <div id="div2"></div> </div>
Se definirmos position: relative para a div1 e position: absolute para a div2 a partir de agora a div2 se posicionará absolutamente em relação a div1, não mais em ralação ao body da página. Exemplo.
position: fixed
#div1 {
position: fixed;
top:40px;
left:10px;
}
Posiciona um elemento fixadamente na página em relação a janela, ou seja, independente de a pagina conter um scroll ou não, o elemento sempre ficará visíve ao usuário em relação as medidas definidas. Vale lembrar que esse tipo de posicionamento não funciona no Internet Explorer. Exemplo.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
O position fixed não funciona no IE6- né? no IE7 funciona normalmente. Ou estou enganado?
Cara está errado ali.
No ultimo exemplo está como static. O correto seria fixed.
E
Posiciona um elemento estaticamente
Talvez possa ser
Posiciona um elemento fixadamente
Ruan Carlos
@Julio César,
Sim, no IE7 ele já funciona.
@Ruan Carlos,
Foi um erro meu que eu nem havia reparado, já consertei aqui, obrigado pela dica.
Grande Pedro Rogério! Ótimo post. Esclareceu minhas dúvidas. Abraço.
Outra dica boa para entendimento de posicionamento com CSS é esse site aqui:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Em inglês.
Massa!
A novidade para mim foi o absolute ficar relativo ao item pai quando o pai está position:relative.
Valeu a dica
Muito bom, esse é um post que tem que ser bem explicado como o pedro fez ai pq se não o leitor sai mais confuso ainda ehhehe…Valeu Pedrão
t+
@Lourenzo
Isso é muito comum em menus.
Alguem pode me explicar o que ou quem seria o item pai ??!!
@Pietro,
Observe a seguinte marcação HTML que você irá entender isso na hora:
<div id=”pai”>
<div id=”filho”></div>
</div>
Não esta muito bom essi tutorial poderia ser muito melhor..Basta caprichar um poco mais na explicação!
ObG.
“Essi” tutorial está ótimo.
Genio… vc é um Gênio mesmo heim sua mula… Nem sabe escrever “seu analfabeto” e fica criticando o post do cara. Ótimo post Pedro. o/
Abraços
Tinha que ser o Genio mesmo!!!
position: fixed; EI7+ FUNCIONA.
position: fixed; EI6- QUEBRA LAYOUT*.
*EU CHAMO QQ ERRO DE RENDERINZAÇÃO DE “QUEBRA LAYOUT”
Um abraço a todos,
nilton.com@gmail.com
nilton.com@hotmail.com
(A felicidade está ao seu alcance eo sucesso próximo.)
Enterrem o IE6.
A gente precisa se unir e reivindicar uma web melhor.
Navegadores como o IE6 tornaram a vida dos programadores um verdadeiro inferno.
O negócio agora é ir pra frente e exigir uma compatibilidade cada vez melhor como CSS, sob risco de boicote.
Olá muito bom, deu pra esclarecer bem algumas duvidas, mas ainda tenho uma duvida estou criando um site com css e usei position: absolute
nao sei se tem a ver, mas ao minimizar os elementos ficam de forma desorganizada, poderia me ajudar com isso?
VALEU t+
Muito bom. Muito útil para alguns projetos que estou desenvolvendo.
Acho q vc devia dar exemplos mais claros !
Você quer que ele faça a prova do vestibular pra você tb? quer que ele faça seu trabalho e você apenas pegar a grana?
Deve estar de brincadeira
Valew Camarada!
Me ajudou muito hoje…
LOL, eu ia dizer que você precisava dar exemplo visuais, mais eu vi que clicando no link exemplo ver. Me ajudou muito, obrigado.
Tipo, apesar de ter ajudado não entendi nada sobre oque é absoluto e relativo nesse caso;
Estou com um problema simples pra quem manja de CSS (o que não é o meu caso):
Fiz um site em Flash CS5, com 1920×1080 pixels. Estou tentando alinhá-lo ao centro absoluto HORIZONTAL, deixando o alinhamento vertical no topo normal mesmo.
Consegui banir o scroll horizontal, deixando apenas o horizontal. Mas não consigo de forma alguma fazer com que o navegador IGNORE o tamanho HORIZONTAL excedente (1920px) e sempre deixe CENTRALIZADO HORIZONTALMENTE.
Estou quase lá, consegui fazer com que as medidas horizontais fossem posicionadas onde eu quero, mas ela variam de acordo com a resolução do monitor do usuário, descentralizando o site.
O meu código atual é:
body {
overflow-x: hidden;
background-image: url(fundo.jpg);
position: relative;
right:22%;
margin:0 auto;
padding:0px
}
Como proceder pra que o navegador abra sempre CENTRALIZADO HORIZONTALMENTE?
Estou à quase 20 dias tentando e não consigo. Obrigado e parabéns pelo site!
Amigo, acho que a resolução desse flash esta muito alta, poucas pessoas conseguiram visualizar por completo, de qualquer forma segue a solução para conseguir centralizar vertical/horizontal:
#div-flash {
width:1920px;
height:1080px;
top:50%;
left:50%;
margin-top:-540px; // (height / 2)
margin-left:-960px; // (width / 2)
position: absolute;
}
aqui vai o seu flash