Fixando um conteudo na tela usando CSS

Como eu já havia falado antes o Internet Explorer 6 não reconhece o comando position: fixed(o IE7 já reconhece) então para podermos fixar um conteudo na tela precisamos usar um hack.

Veja aqui um exemplo de como é um conteudo fixo

Vejamos então como fazer isso.

Nos navegadores descentes(qualquer um que não seja o IE), usamos os seguintes atributos do CSS para fixar um conteudo na tela:

<style type="text/css">

#meudiv{
position: fixed;
left: 100px;
top: 50px;
}

</style>

<div id="meudiv">
Algum conteudo aqui
</div>

Sendo o left e top as distancias que o conteudo irá ficar em relação a tela.

Como o IE 6 ou anterior não reconhece esse comando precisamos usar o seguinte hack:

<style type="text/css">

* html #meudiv{ /*IE6 only rule, applied on top of the default above*

left: 100px;
position: absolute;
top: expression(document.compatMode=="CSS1Compat"?        document.documentElement.scrollTop+50+"px" : body.scrollTop+100+"px");

}

</style>

<div id="meudiv">
Algum conteudo aqui
</div>

O * html é um hack que indica que o conteudo só será executado no IE 5 ou 6, e para alterar a altura que o conteudo ficará na tela é só mudar o numero em body.scrollTop+100+”px”

Como eu havia explicado no post anterior você pode colocar o dois css #meudiv que o segundo só será executado no IE e o primeiro em todos os outros navegadores

Mas com esse hack o conteudo fixo, fica um pouco estranho no IE, pois ao mover a tela, é como se o conteudo o se movesse também, e ele retorna para posição fixa, principalmente se for algo grande(muitas linhas), veja o exemplo para saber do que estou falando.

E no fórum tem um exemplo de uso disso na imagem de ir ao topo(irei colocar algo parecido aqui no blog)