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???
5
respostas
respostas
Dúvida absolute
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:
- div#amarela está dentro do div#azul
- div#azul tem position declarado? Não, então é static por padrão (o absolute não vai respeitar isso)
- o próximo pai é div#verde. Tem position? Não, então vai pro
body - aqui ele atinge o limite de onde poderia se posicionar, então fica colado lá no topo direita
O 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
verde {
background-color: green; width: 700px; height: 500px; position:relative; }
amarela{
background-color:yellow; width:300px; height:300px; position:absolute; top:0; right:0; }
azul{
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