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

TypeScript uses vscode to monitor the code compilation process

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

TypeScript uses vscode to monitor the code compilation process

Detailed explanation of Linux server status and performance related commands

Native JS implementation of loading progress bar

Simple steps to implement H5 WeChat public account authorization

Implementation of mysql using mysqlbinlog command to restore accidentally deleted data

TimePicker in element disables part of the time (disabled to minutes)

Detailed explanation of CSS margin collapsing

How to configure tomcat server for eclipse and IDEA

Analysis of MySQL joint index function and usage examples

Detailed explanation of JavaScript array deduplication

Recommend

MYSQL slow query and log example explanation

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

Detailed tutorial on installing Python 3.8.1 on Linux

Ubuntu 20.04 desktop installation and root permission activation and ssh installation details

Detailed process of upgrading gcc (version 10.2.0) under CentOS7 environment

SQL Server Comment Shortcut Key Operation

Detailed tutorial on installing MySQL 8 in CentOS 7

Commonly used English fonts for web page creation

15 important variables you must know about MySQL performance tuning (summary)

Solve the problem of the container showing Exited (0) after docker run

MySQL 5.7.21 decompression version installation and configuration method graphic tutorial (win10)

CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation

Detailed discussion on the issue of mysqldump data export

Common tags in XHTML

CSS selects the first child element under the parent element (:first-child)