Solution to the problem of z-index not taking effect in CSS3

Solution to the problem of z-index not taking effect in CSS3

I recently wrote a combination of CSS3 and js, and encountered many cases where z-index did not take effect:

1. When using z-index, the element has no positioning (except static positioning)

2. In the case of positioning, the z-index of the element does not take effect because the child element of the element comes up later and covers the element. The solution is to set the z-index of the child element covering the element to a negative number.

Drop-down box example:

1. When covering:

2. Set the z-index of the drop-down box to a negative number

Code:

<!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>Untitled Document</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; It's a matter of a moment*/
    transition: all 1s;
    opacity: 0;
    /*The later box will cover the previous box, even if the z-index of the previous box is larger.
    But you can set the z-index of the subsequent box to a negative number*/
    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>First level menu<ul>
                <li>Secondary Menu</li>
                <li>Secondary Menu</li>
                <li>Secondary Menu</li>
            </ul>
        </li>
        <li>First level menu<ul>
                <li>Secondary Menu</li>
                <li>Secondary Menu</li>
                <li>Secondary Menu</li>
            </ul>
        </li>
        <li>First level menu<ul>
                <li>Secondary Menu</li>
                <li>Secondary Menu</li>
                <li>Secondary Menu</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    // Get object Traverse object Operation Display module Hide module function List(id) { // Get object this.id = document.getElementById(id);
        // Get the id value this.lis = this.id.children[0].children; // Get all the li in the first-level menu
    }
    // init initialization List.prototype.init = function() { // Traverse all li to show and hide 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]); //Show it }
            this.lis[i].onmouseout = function() {
                that.hide(this.children[0]); // hide it }
        }
    }
    // Display module List.prototype.show = function(obj) {
// obj.style.display = "block";
        obj.className = "show";

    }
    //Hide module List.prototype.hide = function(obj) {
// obj.style.display = "none";
        obj.className = "lvTow";
    }
    var list = new List("list"); // Instantiates an object called list
    list.init();
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Detailed explanation of styles in uni-app

>>:  A brief discussion on the lock range of MySQL next-key lock

Recommend

Example of adding attributes using style in html

Add inline styles to the required links: Copy code...

MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)

This article shares with you the graphic tutorial...

TypeScript enumeration basics and examples

Table of contents Preface What are enums in TypeS...

MySQL Query Cache Graphical Explanation

Table of contents 1. Principle Overview Query Cac...

CSS techniques for achieving multi-column equal height layout that the front end should master

1. Introduction When we are writing a page, we so...

Detailed explanation of the failure of MySQL to use UNION to connect two queries

Overview UNION The connection data set keyword ca...

MySQL controls the number of attempts to enter incorrect passwords

1. How to monitor MySQL deadlocks in production e...

MySQL merge and split by specified characters example tutorial

Preface Merging or splitting by specified charact...

Detailed explanation of Angular data binding and its implementation

Table of contents Preface What is data binding? T...

Detailed explanation of Mysql 5.7.18 installation method and the process of starting MySQL service

MySQL is a very powerful relational database. How...

Comparison of several examples of insertion efficiency in Mysql

Preface Recently, due to work needs, I need to in...

Simple steps to write custom instructions in Vue3.0

Preface Vue provides a wealth of built-in directi...

Detailed explanation of the best configuration for Nginx to improve security and performance

It mainly shows how to configure X-Frame-Options,...

How to import, register and use components in batches in Vue

Preface Components are something we use very ofte...

Docker installation and configuration image acceleration implementation

Table of contents Docker version Install Docker E...