CSS+JS项目中z-index不生效咋整？

发布时间：2023-08-12 13:55:21 所属栏目：语言来源：

导读： 有一些朋友在写CSS+JS项目时，遇到z-index不生效的问题，那么究竟为什么z-index会不生效呢？这篇小编就给大家来讲讲是什么原因，以及该如何避免和解决这个问题，感兴趣的朋友就继续往下看吧。

1.在用z-inde

有一些朋友在写CSS+JS项目时，遇到z-index不生效的问题，那么究竟为什么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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!