最近写CSS3和js结合，遇到了很多次z-index不生效的情况：

1.在用z-index的时候，该元素没有定位（static定位除外）

2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设置为负数

下拉框例子：

1.盖住的时候：

2.将下拉框的z-index设置为负数

代码：

  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>无标题文档</title>
  6.  <style type="text/css">
  7.  * {
  8.      padding: 0;
  9.      margin: 0;
  10.      list-style: none;
  11.  }
  12.  .all {
  13.      width: 330px;
  14.      height: 120px;
  15.      overflow: hidden;
  16.      background: url(img/bg.jpg) no-repeat;
  17.      margin: 100px auto;
  18.      line-height: 30px;
  19.      text-align: center;
  20.      padding-left: 10px;
  21.      margin-bottom: 0;
  22.  }
  23.  .all ul {
  24.      position: relative;
  25.      height: 30px;
  26.      width: 100%;
  27.  }
  28.  .all ul li {
  29.      width: 100px;
  30.      height: 30px;
  31.      background: url(img/libg.jpg);
  32.      float: left;
  33.      margin-right: 10px;
  34.      position: relative;
  35.      cursor: pointer;
  36.  
  37.  }
  38.  .all ul ul {
  39.      position: absolute;
  40.      left: 0;
  41.      top:-90px;
  42.      /*display: none; 是一瞬间的事*/
  43.      transition: all 1s;
  44.      opacity: 0;
  45.      /*后来的盒子会盖住前面的盒子，就算前面的盒子z-index再大也会被盖住，
  46.      不过可以设置后来的盒子的z-index为负数就行了*/
  47.      z-index:-1;
  48.  
  49.  }
  50.  
  51.  .all ul .lvTow {
  52.      top:-90px;
  53.      opacity: 0;
  54.  }
  55.  
  56.  .all ul .show{
  57.      top:30px;
  58.      opacity: 1;
  59.  }
  60.  
  61.  </style>
  62.  </head>
  63.  
  64.  <body>
  65.  <div class="all" id="list">
  66.      <ul>
  67.          <li>一级菜单
  68.              <ul >
  69.                  <li>二级菜单</li>
  70.                  <li>二级菜单</li>
  71.                  <li>二级菜单</li>
  72.              </ul>
  73.          </li>
  74.          <li>一级菜单
  75.              <ul >
  76.                  <li>二级菜单</li>
  77.                  <li>二级菜单</li>
  78.                  <li>二级菜单</li>
  79.              </ul>
  80.          </li>
  81.          <li>一级菜单
  82.              <ul >
  83.                  <li>二级菜单</li>
  84.                  <li>二级菜单</li>
  85.                  <li>二级菜单</li>
  86.              </ul>
  87.          </li>
  88.      </ul>
  89.  </div>
  90.  </body>
  91.  </html>
  92.  <script>
  93.      // 获取对象     遍历对象操作     显示模块   隐藏模块
  94.  
  95.      function List(id) {  //  获取对象
  96.          this.id = document.getElementById(id);
  97.          // 取 id 值
  98.          this.lis = this.id.children[0].children;  // 获取一级菜单所有的li
  99.      }
  100.      // init 初始化
  101.      List.prototype.init = function() {  // 遍历所有的li 显示和隐藏
  102.          var that  = this;
  103.          for(var i=0;i<this.lis.length;i++)
  104.          {
  105.              this.lis[i].index = i;
  106.              this.lis[i].onmouseover = function() {
  107.                  that.show(this.children[0]);  //  显示出来
  108.              }
  109.              this.lis[i].onmouseout = function() {
  110.                  that.hide(this.children[0]);  // 隐藏起来
  111.              }
  112.          }
  113.      }
  114.      //  显示模块
  115.      List.prototype.show = function(obj) {
  116.  //        obj.style.display = "block";
  117.          obj.className = "show";
  118.  
  119.      }
  120.      // 隐藏模块
  121.      List.prototype.hide = function(obj) {
  122.  //        obj.style.display = "none";
  123.          obj.className = "lvTow";
  124.      }
  125.      var list = new List("list");  // 实例化了一个对象 叫  list
  126.      list.init();
  127.  </script>

CSS3--关于z-index不生效问题的更多相关文章

  1. css3的calc属性不生效问题

    css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...

  2. 来看看css3中的box-shadow

    不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...

  3. 如何让IE 低版本下支持 css3属性

    依赖源  该文件为  ie-css3.htc    (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码 通过源码我们可以看到 该文件在一定程度上 ...

  4. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  5. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  6. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  7. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  8. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  9. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

  10. CSS ------ 样式学习 （一）

    CSS 指层叠样式表 (Cascading Style Sheets) :定义如何显示 HTML 元素(一套自定义的衣服) 语法: 由选择器和声明(可以是一条或多条)构成, 声明以大括号({})括起来 ...

随机推荐

  1. linux负载均衡（什么是负载均衡）

    linux负载均衡(什么是负载均衡) 一.总结 一句话总结: 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用 ...

  2. Delphi代码规范

    1. 前言 本文档主要是为Delphi开发人员提供一个源代码书写标准,以及程序和文件的命名标准,使他们在编程时有一致格式可遵循.这样,每个编程人员编写的代码能够被其他人理解. 2. 源程序书写规范 2 ...

  3. Bootstrap.之模态框 显示在遮罩层后面

    Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...

  4. 入门servlet：request获取请求体数据

    @WebServlet("/RequestDemo5") public class RequestDemo5 extends HttpServlet { protected voi ...

  5. UVA11107 Life Forms SA模板

    Life Forms Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 16827   Accepted: 4943 Descr ...

  6. MySQL系列(八)--数据库分库分表

    在互联网公司或者一些并发量比较大的项目,虽然有各种项目架构设计.NoSQL.MQ.ES等解决比较高的并发访问,但是对于数据库来说,压力 还是太大,这时候即使数据库架构.表结构.索引等都设计的很好了,但 ...

  7. html5绘图工具选择

    1. Chart.js 基于html5, 完全开源免费 功能过于简单,只有6种图,能满足小系统需求,使用简便,效果比较炫. http://www.bootcss.com/p/chart.js/ 2. ...

  8. JS引擎查找属性的原理

    原型继承的原理 不断向上查找 funciton getProperty(obj,prop){ if(obj.hasOwnProperty(prop){ return obj[prop]; }else ...

  9. vue组件与路由的使用步骤

    router:根据不同的地址跳转到不同的页面一.vue-router的使用 1.下载路由模块      npm vue-router --save 2.在router.js中 先引入路由    imp ...

  10. loading遮罩

    .loading{ position: relative; cursor: default; point-events: none; text-shadow: none!important; colo ...