Z:Index Issue in IE7



I’ve amending a site and am having issue with the div ‘grassright’

I’ve given the div ‘homeCartonImage’ a z:index of 100 and the ‘grassright’ a z:index of 99 but in IE7 the grass image still overlays the juice carton image.

Any tips?


In IE7 and under it’s the positioned parent that has the final say and in this case that is #pageContent. Ie7 and under assign a z-index of zero to positioned elements by default and not auto and therefore the parent becomes the container for all its children regarding their stacking level.

#pagecontent {
    position: relative;
    float: left;
    clear: left;
    width: 602px;
    margin: 35px 190px 10px 168px;