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

bookPosicionamento Fixo para Elementos de Interface Fixos

Posicionamento fixo permite posicionar um elemento em relação à janela de visualização (viewport) do navegador, em vez de em relação ao seu elemento pai. Isso significa que o elemento sempre permanecerá na mesma posição na tela, mesmo que o usuário role a página.

position: fixed;

Pode ser útil ao criar uma navegação de página que estará sempre disponível para o usuário ou quando for necessário exibir permanentemente alguma informação na tela. Por isso, vamos praticar criando o botão de chat de suporte, que ficará sempre no canto inferior direito da janela de visualização.

index.html

index.html

index.css

index.css

copy

O botão de chat está sempre disponível para o usuário. Ele não desaparece ao rolar a página. Isso foi alcançado apenas com a propriedade position: fixed;.

question mark

Qual é o comportamento da propriedade position: fixed?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 6

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

bookPosicionamento Fixo para Elementos de Interface Fixos

Deslize para mostrar o menu

Posicionamento fixo permite posicionar um elemento em relação à janela de visualização (viewport) do navegador, em vez de em relação ao seu elemento pai. Isso significa que o elemento sempre permanecerá na mesma posição na tela, mesmo que o usuário role a página.

position: fixed;

Pode ser útil ao criar uma navegação de página que estará sempre disponível para o usuário ou quando for necessário exibir permanentemente alguma informação na tela. Por isso, vamos praticar criando o botão de chat de suporte, que ficará sempre no canto inferior direito da janela de visualização.

index.html

index.html

index.css

index.css

copy

O botão de chat está sempre disponível para o usuário. Ele não desaparece ao rolar a página. Isso foi alcançado apenas com a propriedade position: fixed;.

question mark

Qual é o comportamento da propriedade position: fixed?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

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