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

bookDesafio: Dominar o Posicionamento Sticky

Tarefa

Crie um layout de blog para artigos sobre animais, garantindo que a foto correspondente do animal esteja sempre visível enquanto o usuário lê o artigo. Quando o usuário começar a ler sobre outro animal, exiba a foto do próximo animal. Etapas:

  1. Aplique o posicionamento sticky ao elemento com o nome de classe illustration.
  2. Especifique a posição na página onde o elemento deve se tornar sticky.
index.html

index.html

index.css

index.css

copy
  1. Para fazer com que as ilustrações de animais fiquem fixas no topo da janela de visualização enquanto o usuário lê o artigo, aplique o posicionamento sticky ao elemento com o nome de classe illustration.
  2. Defina a propriedade top como 0 para especificar que o elemento deve permanecer fixo no topo da janela de visualização.
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 9

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 how to add the CSS for the sticky positioning?

What should the HTML structure look like for the animal articles and illustrations?

How do I switch the illustration when the user starts reading about another animal?

Awesome!

Completion rate improved to 2.04

bookDesafio: Dominar o Posicionamento Sticky

Deslize para mostrar o menu

Tarefa

Crie um layout de blog para artigos sobre animais, garantindo que a foto correspondente do animal esteja sempre visível enquanto o usuário lê o artigo. Quando o usuário começar a ler sobre outro animal, exiba a foto do próximo animal. Etapas:

  1. Aplique o posicionamento sticky ao elemento com o nome de classe illustration.
  2. Especifique a posição na página onde o elemento deve se tornar sticky.
index.html

index.html

index.css

index.css

copy
  1. Para fazer com que as ilustrações de animais fiquem fixas no topo da janela de visualização enquanto o usuário lê o artigo, aplique o posicionamento sticky ao elemento com o nome de classe illustration.
  2. Defina a propriedade top como 0 para especificar que o elemento deve permanecer fixo no topo da janela de visualização.
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 9
some-alt