解决IE6 IE7绝对定位弹层被后面的元素遮住

时间:2022-11-15 16:44:58

解决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标签时,这个标签显示。