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

解决IE6 IE7绝对定位弹层被后面的元素遮住的更多相关文章

  1. ie6 ie7 绝对定位 相对定位 层被遮住

    relative 上加上z-index有多个,则z-index递减, absolute层显示则不会被其它标签挡住.

  2. 解决IE6/IE7/IE8不支持before,after问题

    对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...

  3. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  4. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  5. 解决IE6,IE7不能隐藏绝对定位溢出的内容

    令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效. 情况一:(在parent上增加position:relative) <s ...

  6. 解决IE6 IE7 JSON.stringify JSON 未定义问题

    在项目中引入json2.js 官方http://www.json.org/ 源码地址:https://github.com/douglascrockford/JSON-js $.ajax({ url: ...

  7. clearfix 兼容IE6/IE7,解决ie6/ie7下多出一行的问题,bootstrap的clearfix的bug

    .clearfix:before, .clearfix:after { content: "."; display: block; height: ; overflow: hidd ...

  8. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  9. span 右浮动折行 解决ie6/7中span右浮动折行问题

    RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...

随机推荐

  1. apache-tomcat 及对应eclipse下载地址for mac

    tomcat 7.0.42http://mirrors.hust.edu.cn/apache/tomcat/tomcat-7/v7.0.42/bin/apache-tomcat-7.0.42.zip ...

  2. (转)[sh] <defunct>进程

    我也碰到僵尸进程了,必须通过关闭僵尸进程的父进程或者重启解决. 来自:http://jerrybear.blog.51cto.com/629421/387846 今日发现服务器上多了一些名称为[sh] ...

  3. HBASE---shangxueT

  4. python爬虫知识点总结(二)爬虫的基本原理

    一.什么是爬虫? 答:请求网页并提取数据的自动化程序. 二.爬虫的基本流程 三.什么是Request和Response? 1.Request 2.Response 四.能抓取怎样的数据 五.解析方式 ...

  5. Redo Gap 处理与优化

    理论背景 当redo data 传送发生中断时就会产生redo gap.当redo 传送恢复正常以后,redo transport service 会自动检测redo gap并发送缺失的redo 到d ...

  6. openStack灾备方案说明

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1) OpenStack 高可用方案概述 (2) Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3 ...

  7. Repeater 和 GridView 添加序列号

    <tr><asp:Repeater ID="rptOfBrowerInfo" runat="server" >    <Heade ...

  8. c# list排序的实现方式

    实体类实现IComparable接口,而且必须实现CompareTo方法 实体类定义如下: class Info:IComparable { public int Id { get; set; } p ...

  9. linux私有ftp搭建与创建新用户

    一.私有ftp搭建 以后补充 1. 搭建 2.修改配置文件 二.创建新用户 在linux搭建好私有ftp后,默认存放目录是 /var/ftp/ 我们有时候需要给外部公司之类的用,但又不想让他们直接在  ...

  10. CF-811A

    A. Vladik and Courtesy time limit per test 2 seconds memory limit per test 256 megabytes input stand ...