正文
解决IE6 IE7绝对定位弹层被后面的元素遮住
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
解决IE6 IE7绝对定位弹层被后面的元素遮住？
弹层边框一直被后面的元素边框遮住，试了n种方法，只有这个比较好用。
<div class="tuijian-table">
<ul>
<li class="first">
<span class="thead">4月（将雨最少）</span>
<p class="tbody">
<span class="mon-wendu"><em class="begin-wd">9</em>～<em class="end-wd">15</em></span>
<span class="mon-jiangyu">5天降雨</span>
</p>
<a class="layer" href=""><b class="now-detail">查看1月历史天气详情</b></a>
</li>
<li>
<span class="thead">5月</span>
<p class="tbody">
<span class="mon-wendu"><em class="begin-wd">9</em>～<em class="end-wd">15</em></span>
<span class="mon-jiangyu">7天降雨</span>
</p>
<a class="layer" href=""><b class="now-detail">查看1月历史天气详情</b></a>
</li>
<li class="lasted">
<span class="thead">6月（空气最优）</span>
<p class="tbody">
<span class="mon-wendu"><em class="begin-wd">9</em>～<em class="end-wd">15</em></span>
<span class="mon-jiangyu">9天降雨</span>
</p>
<a class="layer" href=""><b class="now-detail">查看1月历史天气详情</b></a>
</li>
</ul>
</div>
style样式：
li{
float:left;
width:248px;
height:105px;
text-align:center;
font-size:12px;
cursor:pointer;
position:relative;
z-index:9;
zoom: 1;
*zoom:1;
}
li.first{
border-left:1px solid #dcecf9;
position:relative;
z-index:99;
}
li.lasted{
z-index:1;
}
.layer{
display:none;
position:absolute;
left:0;
top:0;
z-index:9;
zoom: 1;
border: 2px solid #268dea;
text-decoration: none;
width:246px;
height:101px;
}
.layer b{
background:#268dea;
line-height:27px;
display:block;
width:100%;
color:#fff;
margin-top:75px;
text-align:center;
font-size:12px;
}
li:hover{
.layer{
display:block;
}
}
看出来没有，弹层的定位层级不是最重要的，最重要的是三个相对定位的li元素，一个比一个层级高了，所以要设置成第一个的层级比下一个高才可以。
ps补充：li标签hover前后border宽度不一样怎么防止抖动？
把hover之后的border不要加载li上，加在一个单独的隐藏标签上，当hover上li标签时，这个标签显示。
