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

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