Transparent GIF in IE6 displays BEHIND content

I have a div like this:

<div id="pop" class="pop_komm">
    <img src="Graphics/list_updated.gif">
    </div>

This is the css:

.pop_komm {
    position: absolute;
    z-index: 20;
    height: 52px;
    width: 208px;
    left: 660px;
    display:none;
    top: 247px;
    z开发者_如何学运维oom:1;
}

The above divs style.display is set to "block" using javascript on a drop-down lists onChange event.

The "pop" div is displayed, and the image in it, but the problem is that the image is displayed behind the content. This only happens in IE6 (haven't tested IE7 or 8 yet). Other browsers display it fine.

The image is a transparent GIF, which I think might have something to do with it. Any ideas how to solve this?

Thanks

IE does have some nasty issues with z-index.

The default value of the position style is position:static;. This value does not participate in z-index ordering, meaning that elements where you haven't specified the position style may not be layered as you expect.

The solution is to add position:relative; to any elements that are mis-behaving - ie the elements that are being layered above the image.

Hope that helps.

add position relative to the image?