How to fix Overlapping of select box in IE6

In IE, the select box appear on top of other elements even if you set zIndex property to higher value. I found this solution in controls.js of scriptaculous framework. I just follow their code and make it simple for me to use it.

To solve this problem, you need to create an iframe, append it below your div container, clone the position between these two, and set zIndex of that iframe to 1 and zIndex of your div container to 2. This will solve the problem, but it is not still good. IE seems to a little bit stuck about a few seconds when creating this type of iframe. Therefore, from my opinion, you should place an iframe tag on html is better. Then, you just call fixIE() function. But make sure that iframe and your div container have the same immediate parent node.

function fixIE(element, element_iefix) {
    Position.clone(element, element_iefix, {setTop:(!element.style.height)});
    element_iefix.style.zIndex = 1;
    element.style.zIndex = 2;
    Element.show(element_iefix);
}

//req: element must be position absolute.
function fixIEOverlapping(element) {
    if($(element.id + '_iefix')) {
        fixIE(element, $(element.id + '_iefix'));
    }

    if((navigator.appVersion.indexOf('MSIE')>0) 
        && (navigator.userAgent.indexOf('Opera')<0) 
        && (Element.getStyle(element, 'position') == 'absolute')
        && !$(element.id + '_iefix')) {
        new Insertion.After(element.id, 
        '<iframe id="' + element.id + '_iefix" ' +
        'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
        'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');

        setTimeout(function() {
            fixIE(element, $(element.id + '_iefix'));
        }, 50);
    }
}

In order to use it, just call fixIEOverlapping($("myDiv"));