Este é um post de José Lopes.
No CSS a expressão 'position: fixed' define que a classe ou instância que a contém assume uma posição fixa no écran e não se mexe com o scroll.
Mais uma vez, o IE surpreende-nos por não suportar esta propriedade. Encontra-se a descrição deste Bug na internet, sendo mencionado que tal não acontece na versão Mac e no IE7 quando seleccionado o modo strict.
Uma vez que este modo strict apresenta por vezes problemas e de qualquer modo não me resolvia o problema para versões anteriores do IE, iniciei uma busca para encontrar uma solução só com CSS e sem javascript, tão usado para resolver os bugs do IE, e apresento aqui a que encontrei.
Em primeiro lugar, no ficheiro do CSS devemos definir o estilo normalmente, i.e., com a 'position: fixed' onde acharmos que devemos utilizar.
Tomando um exemplo prático, imaginemos que pretendemos ter um menu lateral do lado esquerdo e um bloco de texto do lado direito que ficará sujeito ao scroll. Definimos o estilo do menu, por exemplo:
div.menu { float: left; position: fixed; z-index: 1; }
O bloco de texto para o lado direito não necessita de nenhuma formatação especial, como float ou position.
Se notarem temos um z-index: 1; para forçar o menu a ficar por cima do texto do lado direito, caso contrário no IE ele fica por baixo. Eu defini aqui uma classe mas também poderia ter usado uma instância (#menu).
Para fazer funcionar no IE temos de acrescentar o seguinte código ao nosso CSS:
@media screen { * html, * html body { overflow-y: hidden; height: 100%; } * html #iefix { height: 100%; overflow-y: scroll; position: relative; } * html div.menu { position: absolute; } }
Este estilo só vai ser reconhecido pelo Win/IE.
Algumas notas sobre este código:
* html div.menu3, * html div#menu2, * html div.menu { position: absolute; }
Definido o nosso CSS basta aplicá-lo. Para tal devemos seguir uma estrutura para os ficheiros HTML do tipo:
<html> <head> </head> <body> <div id="iefix"> Aqui o bloco de texto do lado direito </div> Aqui os elementos que queremos que fiquem fixos </body> </html>
A nossa pagina deve agora funcionar como mostra o exemplo (nova janela).
Esta solução tem por base a apresentação nos sites gunlaug.no
e css-discuss.incutio.com.
Funciona para a maioria das aplicações que necessito e não utiliza javascript.
Outras soluções, mais complexas a meu ver, existem em: