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

Implementation of automatic completion of Docker commands

Preface I don't know how long this friend has...

Getting Started Tutorial on Using TS (TypeScript) in Vue Project

Table of contents 1. Introducing Typescript 2. Co...

How to use the debouce anti-shake function in Vue

Table of contents 1. Anti-shake function 2. Use d...

MySQL 8.0.15 installation and configuration tutorial under Win10

What I have been learning recently involves knowl...

Implementing shopping cart function based on vuex

This article example shares the specific code of ...

Zookeeper request timeout problem in dubbo: configuration of mybatis+spring connecting to mysql8.0.15

I am going to review Java these two days, so I wr...

Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?

I have been using CSS for a long time, but I have...

MySQL case when group by example

A mysql-like php switch case statement. select xx...

Solve nginx "504 Gateway Time-out" error

Students who make websites often find that some n...

Common functions of MySQL basics

Table of contents 1. Common function classificati...

Detailed explanation of Vue data proxy

Table of contents 1. What I am going to talk abou...

jQuery realizes image highlighting

It is very common to highlight images on a page. ...

How to point the target link of a tag to iframe

Copy code The code is as follows: <iframe id=&...

Full analysis of Vue diff algorithm

Table of contents Preface Vue update view patch s...

Key knowledge summary of Vue development guide

Table of contents Overview 0. JavaScript and Web ...