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

bookDesafio: Aplicar Posicionamento Relativo

Nota

Cada desafio neste curso inclui um exemplo de código composto pelos arquivos index.html e index.css. Como o curso foca no aprendizado de CSS, recomenda-se resolver os desafios no arquivo index.css. Após concluir um desafio, clique no botão "Executar Código" para visualizar a página ao vivo e garantir que o desafio foi resolvido corretamente.

Além disso, cada desafio oferece os botões "Dica" e "Solução". Ao clicar no botão "Dica", serão exibidas dicas relevantes para a tarefa atual, enquanto o botão "Solução" revelará o exemplo de código com a aplicação correta do CSS.

Tarefa

  1. Adicionar posicionamento relative ao segundo elemento com o nome de classe item.
  2. Mover o item 30px para baixo e 50px para a esquerda.
index.html

index.html

index.css

index.css

copy
  1. Mover para baixo definindo um valor positivo para a propriedade top.
  2. Mover para a esquerda definindo um valor negativo para a propriedade left.
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 3

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

Suggested prompts:

How do I select the second element with the `item` class in CSS?

Can you explain how `position: relative` works in this context?

What values should I use for the `top` and `left` properties to achieve the required movement?

Awesome!

Completion rate improved to 2.04

bookDesafio: Aplicar Posicionamento Relativo

Deslize para mostrar o menu

Nota

Cada desafio neste curso inclui um exemplo de código composto pelos arquivos index.html e index.css. Como o curso foca no aprendizado de CSS, recomenda-se resolver os desafios no arquivo index.css. Após concluir um desafio, clique no botão "Executar Código" para visualizar a página ao vivo e garantir que o desafio foi resolvido corretamente.

Além disso, cada desafio oferece os botões "Dica" e "Solução". Ao clicar no botão "Dica", serão exibidas dicas relevantes para a tarefa atual, enquanto o botão "Solução" revelará o exemplo de código com a aplicação correta do CSS.

Tarefa

  1. Adicionar posicionamento relative ao segundo elemento com o nome de classe item.
  2. Mover o item 30px para baixo e 50px para a esquerda.
index.html

index.html

index.css

index.css

copy
  1. Mover para baixo definindo um valor positivo para a propriedade top.
  2. Mover para a esquerda definindo um valor negativo para a propriedade left.
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 3
some-alt