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 que você definiu. Veja o código: body{margin:0; padding:0;} div { position:fixed; top:10px; left:10px; width:150px; height:200px:

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:

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:

`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:

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:

`

Olha como ficou!

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *