Originally published on my old Charteris blog

First things first I am using a technique that I learnt from Bertrand Le Roy's blog. I take no credit for realising that if you place an IFRAME at the same place that you are putting your DIV you will be able it will stop the SELECT from showing. As Bertrand points out SELECT elements are Windowed elements and it is this reason that they display through Windowless elements such as a DIV.

Anyway you can check out Bertrand's post for more detail here

The one thing I have to add is my implementation of this technique using the ASP.NET Ajax framework. Mine is slightly neater in that it is all code-based and does not assume an pre-existing IFRAME

 

var doIFRAMEHack = false;
        

if (Sys.Browser.agent === Sys.Browser.InternetExplorer && Sys.Browser.version < 7){
    //Do IFRAME Hack to stop elements like SELECT showing through the Tooltip div
    doIFRAMEHack = true;
}   
 
// tooltip happens to be the DIV that we are displaying in this sample
var bounds = Sys.UI.DomElement.getBounds(this.get_element());

var tooltip = this._getTooltip(true);

if(tooltip)
{
    if (doIFRAMEHack){
        // Step1 Position IFRAME at same place as Tooltip will be
        var hackIFRAME = $get("divOverSelectHackIFRAME");
        
        if(!hackIFRAME){
            // The IFRAME we are using for the HACK does not exist. 

            // Create it and set the necessary properties
            hackIFRAME = document.createElement("IFRAME");
            hackIFRAME.src = "j avascript:'<html></html>';"
            hackIFRAME.scrolling = "no";
            hackIFRAME.frameBorder = 0;
            hackIFRAME.style.border = "none";
            hackIFRAME.style.display = "block";
            hackIFRAME.style.zindex = 0;
            hackIFRAME.id = "divOverSelectHackIFRAME";
            
            // Append it to the bottom of the body so that it laid out

            // after all the Windowed elements

            document.body.appendChild(hackIFRAME);
        }
        
        // Position the IFRAME in the same place that we are positioning the DIV
        // As Bertrand Le Roy said the IFRAME needs to be positioned BEFORE the DIV is
        Sys.UI.DomElement.setLocation(hackIFRAME, bounds.x, bounds.y + bounds.height);
    }
    
    tooltip.style.display = "";

    Sys.UI.DomElement.setLocation(tooltip, bounds.x, bounds.y + bounds.height);
    this._tooltipShown = true;
    
    if (doIFRAMEHack){
        // Step2 Now that ToolTip has some dimensions get them

        // and use them to tidy up the size of the IFRAME
        var tooltipBounds = Sys.UI.DomElement.getBounds(tooltip);
    
        hackIFRAME.style.height = tooltipBounds.height;
        hackIFRAME.style.width = tooltipBounds.width;    
        hackIFRAME.style.display = "";
    }

}