Oi, pessoal.
Não ficou muito clara para mim a idéia do position; static, relative ou absolute. Quando usar cada um deles e qual suas funções?
O outro tópico estava fechado, por isso abri este aqui.
Abs pessoal.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Oi, pessoal.
Não ficou muito clara para mim a idéia do position; static, relative ou absolute. Quando usar cada um deles e qual suas funções?
O outro tópico estava fechado, por isso abri este aqui.
Abs pessoal.
Oi, Wilber, tudo bem?
O position: static é o valor padrão do elemento, se não adicionarmos outros valor para o position, é o valor static que prevalece. Os elementos serão renderizados em ordem, conforme aparecem no fluxo do documento
O position: absolute tem o poder de se deslocar a partir do browser assim como respeitando o seu elemento pai.
Esse exemplo pode ajudar a esclarecer mais:
<div class="absolute -absolute-child">
absolute
</div>.absolute {
width: 150px;
height: 150px;
line-height: 200px;
color: #FFF;
text-align: center;
text-transform: uppercase;
}
.absolute-child {
background-color: red;Eu desejo mover essa div que está do meu lado esquerdo do navegador usando por padrão a propriedade static, ou seja, se eu usar o right: 0; teoricamente o meu quadradro deveria para o lado direto, certo? Mas ele não vai porque o position static impede. O position absolute pode nos ajudar nisso.
.quadrado-first {
position: absolute;
right: 0;
background-color: red;Pronto! Agora, ele irá para o lado direito do navegador como eu desejo. Mas como funciona? Quando usamos o absolute é criado um novo contexto para o elemento em questão, a div, ocupando um espaço no navegador que indicamos. Esse exemplo é forma que o absolute respeita o navegador.
O position relative é relativo à a posição normal, então, se você quer que num elemento determinado seja adicionado 20px à esquerda, o elemento irá andar.
<div class="relative">
relative
</div>.relative {
position:relative;
width:100px;
height:100px;
background:blue;
left:20px;
top:100px;
}Se ficou alguma dúvida, é só falar!