CSS: Position Fixed IE

Ver post no novo domínio: http://blog.rogeriolino.com/2007/01/23/css-position-fixed-ie/

Um atributo muito interessante quem tem na propriedade position é o fixed.

Com ele você pode posicionar um objeto no palco (como se fosse absolute) só que ele sempre estará na “mesma posição”, mesmo rolando a tela.

Infelizmente o IE (até o 6) não reconhece esse atributo, mas antes de sairmos tentando bolar um código em javascript para ficar posicionando a janela quando o usuário rolar a tela. Vamos usar só o CSS.

Pensando: Poderíamos usar como position o absolute já que com ele a gente tem uma liberdade maior para posicionar o objeto. Mas ainda temos o problema com a rolagem.

Mas tem o overflow, podemos colocar como auto para criar uma barra de rolagem para o que ultrapassar o limite, e o nosso objeto continuará sempre no mesmo lugar. Pronto!

Nos browser espertos (smarts) fica assim:

#menu {
top: 15%;
left: 50px;
width: 200px;
padding: 20px 0px;
border: 2px solid #CCCCCC;
position: fixed;
}

Dá para notar que é como estivéssemos colocando como absolute mesmo (left, top). Só isso basta.

Agora para o IE vamos colocar o CSS dentro de um comentário do HTML (que por sua vez só ele mesmo para ler como código o comentário):

<!–[if IE]>

<style type=”text/css”>
html, body {
height: 100%;
overflow: auto;
}

#menu {
position: absolute;
}
</style>

<![endif]–>

Colocamos o body e o html com overflow auto e altura 100% para confirmar que sua altura é toda a janela (a visão do usuário). E definimos o objeto com postion absolute, não precisamos colocar left nem top, porque já foram passados acima, e só estamos sobrescrevendo (position).

Veja esse exemplo funcionando. Dê uma olhada no código-fonte.

Na internet podemos encontrar outros métodos para isto. Vi um que continha expressões javascript no CSS (coisa do IE) e outro que usava javascript puro para posicionar.

Para mais exemplos, resultado da busca:

Powered Google

11 thoughts on “CSS: Position Fixed IE

  1. Rodrigo Ferreira

    Valeu Rogério! Seu código ajudou bastante para resolver um problemão que eu estava passando aqui. Por sorte, já no IE 7 não temos tantos problemas.

    Abraços.

    Responder
  2. Pingback: Blog HotSync » Dica de blog

  3. Pingback: Ser solidário (update) at diário de bordo

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s