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

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

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

下拉框例子：

1.盖住的时候：

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

代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style type="text/css">

 * {

     padding: 0;

     margin: 0;

     list-style: none;

 }

 .all {

     width: 330px;

     height: 120px;

     overflow: hidden;

     background: url(img/bg.jpg) no-repeat;

     margin: 100px auto;

     line-height: 30px;

     text-align: center;

     padding-left: 10px;

     margin-bottom: 0;

 }

 .all ul {

     position: relative;

     height: 30px;

     width: 100%;

 }

 .all ul li {

     width: 100px;

     height: 30px;

     background: url(img/libg.jpg);

     float: left;

     margin-right: 10px;

     position: relative;

     cursor: pointer;

 }

 .all ul ul {

     position: absolute;

     left: 0;

     top:-90px;

     /*display: none; 是一瞬间的事*/

     transition: all 1s;

     opacity: 0;

     /*后来的盒子会盖住前面的盒子，就算前面的盒子z-index再大也会被盖住，

     不过可以设置后来的盒子的z-index为负数就行了*/

     z-index:-1;

 }

 .all ul .lvTow {

     top:-90px;

     opacity: 0;

 }

 .all ul .show{

     top:30px;

     opacity: 1;

 }

 </style>

 </head>

 <body>

 <div class="all" id="list">

     <ul>

         <li>一级菜单

             <ul >

                 <li>二级菜单</li>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

             </ul>

         </li>

         <li>一级菜单

             <ul >

                 <li>二级菜单</li>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

             </ul>

         </li>

         <li>一级菜单

             <ul >

                 <li>二级菜单</li>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

             </ul>

         </li>

     </ul>

 </div>

 </body>

 </html>

 <script>

     // 获取对象     遍历对象操作     显示模块   隐藏模块

     function List(id) {  //  获取对象

         this.id = document.getElementById(id);

         // 取 id 值

         this.lis = this.id.children[0].children;  // 获取一级菜单所有的li

     }

     // init 初始化

     List.prototype.init = function() {  // 遍历所有的li 显示和隐藏

         var that  = this;

         for(var i=0;i<this.lis.length;i++)

         {

             this.lis[i].index = i;

             this.lis[i].onmouseover = function() {

                 that.show(this.children[0]);  //  显示出来

             }

             this.lis[i].onmouseout = function() {

                 that.hide(this.children[0]);  // 隐藏起来

             }

         }

     }

     //  显示模块

     List.prototype.show = function(obj) {

 //        obj.style.display = "block";

         obj.className = "show";

     }

     // 隐藏模块

     List.prototype.hide = function(obj) {

 //        obj.style.display = "none";

         obj.className = "lvTow";

     }

     var list = new List("list");  // 实例化了一个对象 叫  list

     list.init();

 </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. Odoo Documentation : Recordsets

    Other recordset operations Recordsets are iterable(可迭代的) so the usual Python tools are available for ...

  2. 【python之路45】tornado的用法 （三）

    参考:https://www.cnblogs.com/sunshuhai/articles/6253815.html 一.cookie用法补充 1.cookie的应用场景 浏览器端保存的键值对,每次访 ...

  3. 转载：JVM内存分代策略

    Java虚拟机根据对象存活的周期不同,把堆内存划分为几块,一般分为新生代.老年代和永久代(对HotSpot虚拟机而言),这就是JVM的内存分代策略. 为什么要分代? 堆内存是虚拟机管理的内存中最大的一 ...

  4. JDBC2 --- 获取数据库连接的方式二 --- 技术搬运工（尚硅谷）

    /** * 方式二,对方式一的迭代 * 在如下的程序中,不出现第三方的api,使得程序具有更好的可移植性. * @throws Exception */ @Test public void testC ...

  5. 2019.10.29 csp-s模拟测试92 反思总结

    今天快乐的墨雨笙因为什么而几乎爆零了呢? 顾此失彼+不会对拍+无脑的复杂度 今天高兴的墨雨笙又因为什么调了一个下午呢? 不明题意+不想范围+板子低级错误 R.I.P. T1: //唉 //害怕TLE, ...

  6. 关于apache kylin 安装32位linux办法

    最近公司在使用apache kylin做实时开发访问,但是自己集群是linux32 只能安装JDK32位的受限只能3G多内存,而apachekylin 默认是4G内存,需要JDK64位支持. 解决办法 ...

  7. RMQ—ST表

    RMQ(Range Minimum/Maximum Query),RMQ是一个求给定范围内最大最小值的问题.我们一般使用st算法来解决这类问题(Sparse Table).这个算法原理不难,主要是各种 ...

  8. Liferay 7：Liferay DXP解决方案

    分享是美德,欢迎探讨技术 这个作者很厉害呀,写的博客都是解决很刁钻问题的.强烈推荐 http://www.liferaysolution.com/2017/06/captcha-recaptcha-w ...

  9. JAVA面试常见问题之基础篇

    一.  面向对象的特征:继承.封装.(抽象).多态 继承:继承是子类自动共享父类数据和方法的机制,这是类之间的一种关系,提高了软件的可重用性和可扩展性. 封装:封装是保证软件部件具有优良的模块性的基础 ...

  10. SPSS详细操作：样本均数间的多重比较

    SPSS详细操作:样本均数间的多重比较 下面我们用例子来探讨:方差分析得出各组总体均数间的差异有统计学意义之后,如何进行样本均数间的多重比较. 一.问题与数据 为调查A.B.C三种治疗措施对患者谷丙转 ...