Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida numeração de PX ou Comandos?

Referente ao curso HTML e CSS: Os seus primeiros passos, no capítulo Posicionamento de elementos e atividade Position absolute - testes

por Felipe Leite
| 29.6k xp | 11 posts

No exercício titulado de "position absolut - testes" Exercício: Agora faça com que a div amarela fique no canto superior direito da div azul, ou seja, a div amarela deverá permanecer dentro dos limites da div azul. Ao executar o código ao invés de usar o comando absolute como na conferencia de resposta após a resposta do aluno na atividade, eu executei ele da seguinte maneira: <!DOCTYPE html>

O resultado foi o mesmo, porém gostaria de saber qual das duas formas seria a mais conveniente em uma larga escala de trabalhos com sites utilizando o HTML e CSS, a utilização do comando absolute ou a numeração (neste exercício) "right: 200px;", ou vai de pessoal para pessoal? (Sou meio agarrado as regras - por isso a pergunta pode parecer boba para alguns, mais se for algo imposto terei de estudar utilizando a maneira correta.) Grato desde já.

2 respostas
solução!
por Bruno N. Melo
| 244.1k xp | 79 posts
Desenvolvedor FullStack

Oi Felipe, o teu código não apareceu por completo, teria como você repostar o teu código pra a gente dar uma conferida? De toda forma, quando se utiliza o px você tem o tamanho absoluto, o que pode dar problemas quando se utilizar um resolução diferente ou devices distintos. o ideal é que se utilize escalas que se ajustam com o tamanho da tela, como %, rem, em ou ch.

por Felipe Leite
| 29.6k xp | 11 posts

Opa, desculpa eu não vi que o código não apareceu na hora da postagem, segue abaixo o Código e Agradeço pela resposta Bruno Nóbrega de Melo.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #verde {
                background-color: green;
                width: 700px;
                height: 500px;
                position: absolute;
            }
            #azul {
                background-color: blue;
                width: 500px;
                height: 400px;
            }
            #amarela {
                background-color: yellow;
                width: 300px;
                height: 300px;
                position:absolute;
                top: 0;
                right: 200px;
            }
        </style>
    </head>

    <body>
        <div id="verde">
            <div id="azul">
                <div id="amarela"></div>
            </div>
        </div>
    </body>
</html>