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
absolute
ao elemento filho. - Calcular os valores das propriedades
top
eleft
para 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
absolute
e o outro tenha posicionamentorelative
para 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
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you show me the CSS code to center the child element using absolute positioning?
What should the HTML structure look like for the parent and child divs?
Can you explain why one element needs relative positioning and the other absolute?
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
absolute
ao elemento filho. - Calcular os valores das propriedades
top
eleft
para 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
absolute
e o outro tenha posicionamentorelative
para 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
Obrigado pelo seu feedback!