Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Desafio: Implementar Posicionamento Absoluto | Dominando o Posicionamento em CSS
Técnicas Avançadas de CSS

bookDesafio: 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:

  1. Aplicar posicionamento absolute ao elemento filho.
  2. Calcular os valores das propriedades top e left para centralizar o elemento filho dentro do elemento pai. O elemento pai possui largura e altura de 220px, enquanto o elemento filho possui largura e altura de 80px.
  3. Garantir que um elemento tenha posicionamento absolute e o outro tenha posicionamento relative para estabelecer o contexto de posicionamento correto. Caso contrário, o posicionamento absoluto será relativo ao elemento body.
index.html

index.html

index.css

index.css

copy
  1. Para calcular o valor da propriedade top, utilize a fórmula: (parentHeight - childHeight) / 2.
  2. Para calcular o valor da propriedade left, utilize a fórmula: (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 5

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

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

bookDesafio: 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:

  1. Aplicar posicionamento absolute ao elemento filho.
  2. Calcular os valores das propriedades top e left para centralizar o elemento filho dentro do elemento pai. O elemento pai possui largura e altura de 220px, enquanto o elemento filho possui largura e altura de 80px.
  3. Garantir que um elemento tenha posicionamento absolute e o outro tenha posicionamento relative para estabelecer o contexto de posicionamento correto. Caso contrário, o posicionamento absoluto será relativo ao elemento body.
index.html

index.html

index.css

index.css

copy
  1. Para calcular o valor da propriedade top, utilize a fórmula: (parentHeight - childHeight) / 2.
  2. Para calcular o valor da propriedade left, utilize a fórmula: (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 5
some-alt