Desafio: Implementar Posicionamento Absoluto
Tarefa
Centralizar o elemento filho (div com o nome de classe child) dentro do elemento pai (div com o nome de classe parent) utilizando posicionamento absoluto.
Etapas:
- Aplicar posicionamento
absoluteao elemento filho. - Calcular os valores das propriedades
topeleftpara centralizar o elemento filho dentro do elemento pai. O elemento pai possui largura e altura de220px, enquanto o elemento filho possui largura e altura de80px. - Garantir que um elemento tenha posicionamento
absolutee o outro tenha posicionamentorelativepara estabelecer o contexto de posicionamento correto. Caso contrário, o posicionamento absoluto será relativo ao elementobody.
index.html
index.css
- Para calcular o valor da propriedade
top, utilize a fórmula:(parentHeight - childHeight) / 2. - Para calcular o valor da propriedade
left, utilize a fórmula:(parentWidth - childWidth) / 2.
index.html
index.css
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 2. Capítulo 5
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.04
Desafio: Implementar Posicionamento Absoluto
Deslize para mostrar o menu
Tarefa
Centralizar o elemento filho (div com o nome de classe child) dentro do elemento pai (div com o nome de classe parent) utilizando posicionamento absoluto.
Etapas:
- Aplicar posicionamento
absoluteao elemento filho. - Calcular os valores das propriedades
topeleftpara centralizar o elemento filho dentro do elemento pai. O elemento pai possui largura e altura de220px, enquanto o elemento filho possui largura e altura de80px. - Garantir que um elemento tenha posicionamento
absolutee o outro tenha posicionamentorelativepara estabelecer o contexto de posicionamento correto. Caso contrário, o posicionamento absoluto será relativo ao elementobody.
index.html
index.css
- Para calcular o valor da propriedade
top, utilize a fórmula:(parentHeight - childHeight) / 2. - Para calcular o valor da propriedade
left, utilize a fórmula:(parentWidth - childWidth) / 2.
index.html
index.css
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 2. Capítulo 5