zoukankan      html  css  js  c++  java
  • 解决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;
      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;
      246px;
      height:101px;

    }
    .layer b{
      background:#268dea;
      line-height:27px;
      display:block;
      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标签时,这个标签显示。

  • 相关阅读:
    ASP.NET请求管道、应用程序生命周期、整体运行机制
    PHP面试总结
    ASP.NET MVC源码分析系列
    SQL中的重要语句
    Nicescroll滚动条插件的用法
    Nunit2.5.10快速上手(笔记)
    ucore 源码剖析
    《ucore lab8》实验报告
    《ucore lab7》实验报告
    《ucore lab6》实验报告
  • 原文地址:https://www.cnblogs.com/xuniannian/p/8426749.html
Copyright © 2011-2022 走看看