Fixar elementos no browser Css

19 Outubro 2008 Escrito por Gonçalo Martins

Muitas pessoas desconhecem o atributo CSS 'position:fixed;', muito por culpa do atributo ter entrado em desuso e num relativo esquecimento devido maioritariamente ao mau uso que se lhe dava na web 1.0.

No entanto este elemento começa novamente a aparecer na web como um fantástico complemento para mentes imaginativas.

Um exemplo do que se consegue atingir utilizando esta declaração CSS pode ser visto no site cult-f.net. Este site utiliza a declaração 'position:fixed' para fixar no topo do browser uma espectacular nuvem de tags.

Na minha óptica de ver as coisas esta declaração poderia ser utilizada para menus laterais ou no topo de uma página. Poderia ainda juntamente com Javascript ser utilizada para criar pequenas "aplicações" que permaneceriam o mínimo intrusivas possíveis, mas sempre à frente do utilizador! Um clique e a caixa expandia... ideias?

A declaração CSS é extremamente simples e resume-se a isto:

#fixo{
position:fixed; //fixa a posição no browser
top: 50px; //coordenada relativamente ao canto superior esquerdo do browser
left: 29px; //coordenada relativamente ao canto superior esquerdo do browser
}

E o html é so colocar:

<div id="fixo>Conteúdo</div>

Pode ver o seguinte exemplo 'position:fixed'

Artigos Relacionados

Trackback(0)

TrackBack URI for this entry



Rodrigo Novembro 03, 2008	Ao tempo que andava à procura de algo do género!!


Andre Luis Outubro 19, 2009	Pessoal, eue stou procurando um modo de fixar como se fosse um FRAME, deixando-o fixo no topo da tela, mas com o conteúdo logo abaixo dela. Será que colocar um margin-top:Xpx; ou padding-top:Xpx; X = altura funciona? Assim sempre jogaria o conteudo abaixo da barra fixa. Obrigado!


Marcio Agosto 02, 2010	Ei man... tava procurando na net, uma dica sobre deixa um objeto tipo google map fixo no top da página, e as colunas do conteudo rolando por trás do topo. Tem algum exemplo por ai? Vlw

Escreva o seu Comentario

Fixar elementos no browser Css

Artigos Relacionados

Nuvem de Tags