配售鋰元素的DIV面具IE7

Question

下，我有以下DOM結構，我似乎無法獲得IE7我想要的效果（其他瀏覽器似乎是工作的罰款，即使在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> 

有人可以幫助我的CSS定義，將允許：

1. 經具有位置：相對
2. 面膜的位置是：絕對的，在任何項目之上，但低於選定
3. LIS t是絕對的：

當我從列表中刪除position：absolute和top：5px時，我設法讓它正確顯示，但我需要能夠通過top/left屬性放置列表。

有什麼建議嗎？

Answer 1

它看起來像UL在這裏與ie。

讓你的面具在裏面的李，它應該很好。

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

此外，還有一個類'wrap'或'warp'的錯字。你可能會想指定位置：.wrap的相對位置，以確保列表的絕對位置在其中是正確的。