Tableless - Desenvolvimento inteligente com Padrões Web

22/01/2007
Tecnologia e Tendências

Coisas úteis que não funcionam no IE #4 – Position Fixed

Há na propriedade ‘position’ do CSS um valor chamado ‘fixed’. Quando usado, este valor determina que o elemento deve ficar fixo na posição que você mandar, e quando a barra de rolagem é movida, este elemento fica fixado na posição …

Por

Há na propriedade ‘position’ do CSS um valor chamado ‘fixed’. Quando usado, este valor determina que o elemento deve ficar fixo na posição que você mandar, e quando a barra de rolagem é movida, este elemento fica fixado na posição que você definiu. Veja o código:

1
body{margin:0; padding:0;}

div {
position:fixed;
top:10px;
left:10px;
width:150px;
height:200px:
border:1px solid black;
background:#CCC;
}
Resultado do código acima, sem funcionar no IE.

Eu apenas defini um position: fixed; para o DIV. Quando a rolagem é ativada o elemento fica fixado na posição que você definiu.

Só que isso não funciona no IE. Pelo menos por vias normais. Há uma maneira para fazer isso funcionar no IE. Para tanto usaremos CSS HACKS. Já digo que essa é uma daquelas soluções que não há explicação. Simplesmente funciona e pronto. Eu vi essa solução aqui.

Para o IE, você vai usar o seguinte código:

1
2
3
4
5
6
7
8
html, body
{
_height: 100%;
_overflow: auto;
}
div {
_position: absolute;
}

Olha como ficou!

Sim, o código não vai validar, mas você pode escolher outro hack que passe no validador.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.netlus.com.br Rafael Dourado

    Conhecia o fixed, sabia que não funcionava no IE, mas não sabia desse truque para funcionar nele. Bacana, gostei!
    Agora só falta um truque para fazer layouts elásticos funcionarem no IE6 .

  • Gustavo Straube

    Excelente solução! Ainda não tinha visto isso… E pra validar, é só usar conditional comments para o IE, não?

  • http://www.rodflash.com Rodrigo

    Felizmente, no IE7 funciona.
    Eu colocaria conditional comments para funcionar no IE6…

  • http://www.viuvideos.com Everton Figueiredo

    Cara, esse IE é uma merda mesmo, quardo se trabalha com position, Margin, ele interpreta de um muito estranho, mas fase o que, felizmente existem os Hacks para salvar nossas vidas.

  • http://project47.viscountbox.com Carlos Eduardo

    Boa dica.

    Há casos nos quais a utilização do “position: fixed” é bem interessante e contribui para uma melhor navegabilidade do site.

  • Mario Suzuki

    Simplesmente fantástico. Procurava uma solução dessas faz muito tempo, nunca encontrei… Valeu!

  • Eduardo

    Muito bom o artigo…. Solução bem macabra, mas funcional. Pena que só funciona no modo Strict… Tenho uma aplicação web que precisava deste recurso, mas ela está toda em Transicional ainda… Vou ter que migrar antes de poder implementar este recurso.

    Só um comentário:

    “Vou publicar aqui a série de artigos sobre HTML que escrevi para a revista Webdesign. É uma série de 5 e vai sair um a cada 15 dias. Segue o primeiro:”

    Cadê isso que o Elcio prometeu???

  • Davi

    Concordo com o Eduardo sobre a série de artigos que o Élcio prometeu…. Onde estão esses artigos????
    O primeiro foi excelente… Mas pq morreu na praia???
    Estou esperando ansiosamente..hehehe
    Muito bom artigo Diego… Solução bem massa!!! Salvou minha pele!!! kkkkk

  • tigo

    Santo Diego!!!
    Qnto já quebrei a cuca pra achar a resposta pra isso…
    valeu + uma vez senhor.

    E o livro com o Henrique… saí ainda neste ano??

  • http://adrianomelo.com Adriano Melo

    Legal!! eu já tive que fazer praticamente dois sites em um projeto pq nao sabia de uma solucao para isso..

    valeu..

  • Edu

    Nossa que fantástico!

    Eu fazia essa dica aqui.

    (…)Ver códigos sem noção alguma, sem explicação qualquer, sem nenhuma espécie de lógica como esse…não tem preço.
    “Tem coisas que o dinheiro não compra(…)”

    Abraços

  • Davi

    Pena que todas as div´s absolutas passam a ficar fixas com esse script….

  • .. Sander Luis ..

    poderá por assim depois de qualquer outra folha de estilo em sua pagina, mas dae não irá validar seu html por causa do 
    [code]

    html, body{height: 100%;overflow: auto;}div {position: absolute;} 

    [/code]

    no lugar da “div” no estilo coloque #id_da_div_fixada {position: absolute;}
    se deixar apenas assim todas as divs da pagina ficarão fixadas…….

  • .. Sander Luis ..

    poderá usar sim conditional comments com o css valido e coreto sem o _ antes da propriedade mas deve colocar ele depois de qualquer outra folha de estilo em sua pagina, mas dae não irá validar seu html por causa do
    ( é sem o #) só coloquei para não desaparecer o codigo kkkkkkk

    no lugar de “div” na folha de estilo coloque #id_da_div_fixada {position: absolute;}
    se deixar apenas assim todas as divs da pagina ficarão fixadas…….