CSS3: Fixar item no topo ou no rodapé da div

Posted on Posted in CSS3, Desenvolvimento Web, Tutoriais

Olá pessoal, hoje eu trouxe um tutorial bem simples sobre como fixar item no topo ou no rodapé da div utilizando CSS3.

Para fixar o item no topo ou no rodapé da página basta definir o item no css da seguinte forma:

Para fixar o item no topo ou no rodapé de uma div específica, definimos o css da div e do item da seguinte forma:

Como vocês podem ver para que o item fique no topo ou rodapé da div especificada e não da página, precisamos definir a classe da div com “position: relative”.

No meu exemplo defini minha classe como “box” e o meu item é uma imagem.

Para fixar o item na direita ou na esquerda, basta definir o css do item com “right:0” ou “left: 0”.

Confiram os exemplos:

Fixando no topo:

Fixando no rodapé à direita:

 

 

Qualquer dúvida ou dica deixem nos comentários, ficarei feliz em responder!

Espero que tenham gostado do tutorial, deixem seus comentários e compartilhem o post.

Até a próxima, beijos.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *