解决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. 【html学习整理】meta,img,表格,表单

    meta标签: 作用: 给搜索引擎用 . 告诉浏览器是什么编码 <meta charset="UTF-8"> <meta name="keywords& ...

  2. Centos7 安装lnmp

    Centos7 安装lnmp 1.下载 wget http://soft.vpser.net/lnmp/lnmp1.5-full.tar.gz 2.解压 tar -zvxf lnmp1.5-full. ...

  3. Spark- Linux下安装Spark

    Spark- Linux下安装Spark 前期部署 1.JDK安装,配置PATH 可以参考之前配置hadoop等配置 2.下载spark-1.6.1-bin-hadoop2.6.tgz,并上传到服务器 ...

  4. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  5. kvm初体验之六:克隆

    目标:克隆vm1到vm1-clone 1. virsh suspend vm1 2. virt-clone --connect qemu:///system --original vm1 --name ...

  6. babel-runtime 和 babel-polyfill

    Babel 默认只转换新的 JavaScript 语法 https://excaliburhan.com/post/babel-preset-and-plugins.html babel-plugin ...

  7. codeforces 703D D. Mishka and Interesting sum(树状数组)

    题目链接: D. Mishka and Interesting sum time limit per test 3.5 seconds memory limit per test 256 megaby ...

  8. ACM学习历程—ZOJ 3861 Valid Pattern Lock(dfs)

    Description Pattern lock security is generally used in Android handsets instead of a password. The p ...

  9. codevs 4939 欧拉函数

    传送门 4939 欧拉函数  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 钻石 Diamon     题目描述 Description 输入一个数n,输出小于n且与n互素的整数个 ...

  10. 1070 Bash 游戏 V4

    传送门 1070 Bash游戏 V4   基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次拿的数量最少1个,最多 ...