Question

I have following Dom structure and I can’t seem to get the effect I want in IE7 (Other browser seems to be working fine, even in IE8)

.wrap {
    margin: 10px 10px 0 0;
}
.mask {
    position:absolute;
    top: 30px;
    width:150px;
    height:150px;
    background-color:green;
    z-index: 5;
}
.list {
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    position:absolute;
    top: 5px;
}
.item {
    position: relative;
    width:100px;
    height:100px;
    background-color:blue;
}
.item.selected {
    position: relative;
    z-index: 100;
    background-color:red;
}

<div class="warp">
<div class="mask"></div>
<ul class="list">   
    <li class="item selected"></li>
    <li class="item"></li>
</ul>
</div>

Can someone help me with the css definition that’ll allow the following:

1. warp has position:relative
2. mask is position:absolute and on top of any item, but below selected
3. list is position:absolute as well

I managed to get it to display correctly when I remove position:absolute and top:5px from list, but I need to able to place list through top/left attributes.

Any suggestions?

Answer 1

It looks like the ul is getting in the way here with ie.

Make your mask a li inside the ul and it should work great.

<div class="wrap">
<ul class="list">
    <li class="mask"></li>
    <li class="item selected"></li>
    <li class="item"></li>
</ul>
</div>

Also, there is a typo with the class ‘wrap’ or ‘warp’. And you probably will want to specify position: relative for .wrap just to make sure the list’s absolute positioning is correct within it.