Boa noite, no exercício 12 do css3, aborda o assunto absolute, e não consegui entender os testes. não cheguei a resposta do orientador...ficou bem confuso. Alguém poderia me ajudar???
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!
Boa noite, no exercício 12 do css3, aborda o assunto absolute, e não consegui entender os testes. não cheguei a resposta do orientador...ficou bem confuso. Alguém poderia me ajudar???
No material de aula ele diz:
o
absoluteé em relação ao primeiro elemento pai que tenha o tipo de posicionamento diferente destatic
Isso quer dizer que um elemento vai se posicionar absolutamente em relação ao primeiro pai que você tiver declarado um position. No navegador o posicionamento padrão é static. Basta você declarar qualquer outra coisa no elemento pai.
Veja a estrutura do HTML da aula:
<body>
<div id="verde">
<div id="azul">
<div id="amarela"></div>
</div>
</div>
</body>Faça as deduções:
bodyO exercício pede que posicione esse div#amarela no topo direita do div#azul, então é nele que temos que mexer.
#azul {
position: relative;
}O position pode ser qualquer coisa diferente de static. O prof usou absolute. Por enquanto tanto faz, desde que seja diferente de static.
Experimenta esse CSS pra te ajudar a entender, compare as mudanças:
#verde {
position: relative;
background-color: green;
width: 700px;
height: 500px;
}
#azul {
background-color: blue;
width: 500px;
height: 400px;
}
#amarela {
background-color: yellow;
width: 300px;
height: 300px;
position:absolute;
bottom: 0;
right: 0;
}Oi Ricardo, Obrigada por tentar me ajudar, mas mesmo seguindo o seu passo-a-passo, no final não consigo alterar o posicionamento.
html
<!DOCTYPE html>
<html>
<head>
<style>
#verde {
background-color: green;
width: 700px;
height: 500px;
}
#azul {
background-color: blue;
width: 500px;
height: 400px;
}
#amarela {
background-color: yellow;
width: 300px;
height: 300px;
position:absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="verde">
<div id="azul">
<div id="amarela"></div>
</div>
</div>
</body>
</html>css
background-color: green; width: 700px; height: 500px; position:relative; }
background-color:yellow; width:300px; height:300px; position:absolute; top:0; right:0; }
background-color:blue; width:500px; height:400px; }
O Position Absolute se posiciona de acordo com o elemento pai dele, lebrando que o elemento pai deve ter o position relative, se nao tiver ele vai voltando até chamar na tag body e html por exemplo como pai do elemento
Raphaela,
É só copiar o exemplo que o exercício fornece, e adicionar position: relative; no CSS do #azul. Se você estiver trabalhando com outro código, descarte-o.
Luis,
Serve qualquer position declarado no parent que não static, ou seja, serve relative ou absolute ou fixed ou sticky. Faça o teste.
No material de aula:
o absolute é em relação ao primeiro elemento pai que tenha o tipo de posicionamento diferente de static.
Simples!
Tudo que e absoluto, ou seja, voce quer posicionar em algum local absoluto na tela, e absoluto em relacao a algo relativo. Colocando uma div como relative e no seu interior outra div como absolute, voce podera posicionar sua div utilizando os atributos top, bottom, left e right! Mas cuidado, se sua div absolute nao esta no interior de uma div relative, ela sera absoluta em relacao ao elemento pai mais proximo que seja relative (por padrao o body e, e nesse momento que sua div cola la no topo do site! ;) )
Abrasss