HoloCoCos @ TNT

Eu criei com DHTML um alerta que abre no meio da tela, utilizando CSS para formatação, HTML para criar um DIV vazio e JavaScript para inserir o código dentro do DIV, usando a função innerHTML() (especificação Mozilla e Microsoft) e exibir o DIV na página, sobre os outros elementos. No IE um SELECT ficou sobre um pedaço do alerta. No Firefox funcionou perfeitamente como esperado, com o alerta sobre todos os elementos da página, inclusive o SELECT.

No Internet Explorer "windowed elements" (OBJECT, controle ActiveX, plug-in, DHTML, SELECT) são tratados de maneira diferente dos " windowless elements" na ordem de exibição. O iFrame é tratado como windowed no IE 5.01 e anteriores, mas como windowless a partir do IE 5.5. Um artigo de 1º de Setembro de 2005, na Knowledge Base (base de conhecimento) da Microsoft explica como o atributo z-index do CSS (zOrder em JavaScript) funciona nos elementos HTML.

Não sei se é algum bug ou a implementação do IE que é ruim mas nenhum DHTML tem como cobrir um windowed element! Felizmente existe um hack para fazer o menu suspenso funcionar como esperado, descrito muito bem pelo Joe King. Um iFrame consegue ficar sobre um windowed element (SELECT, no meu caso) e um layer de DHTML consegue ficar sobre um iFrame! Ele ainda deu a dica de usar a função insertAdjacentHTML() para criar um iFrame e foi isso que eu fiz:

function exibirAlerta(sTexto) {
    var objLayerAlerta = document.getElementById(ID_LAYER_ALERTA);
    objLayerAlerta.innerHTML = "<table class=\"TABELA\"><tr class=\"TEXTO\"><td align=\"left\">" + sTexto + "</td></tr></table>";
    objLayerAlerta.style.display = "";
    if ( document.all && document.getElementById ) {    //verifica se o browser é o IE
        objLayerAlerta.insertAdjacentHTML("beforeBegin","<iframe style=\"display : none; left: 0px; position: absolute; top: 0px\" src=\"javascript:;\" frameBorder=\"0\" scrolling=\"no\" id=\"divContent\"></iframe>");
        var objLayerContent = document.getElementById("divContent");
        objLayerContent.style.display = "";
        objLayerContent.style.width = objLayerAlerta.offsetWidth;
        objLayerContent.style.height = objLayerAlerta.offsetHeight;
        objLayerContent.style.left = objLayerAlerta.style.left;
        objLayerContent.style.top = objLayerAlerta.style.top;
    }
}