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
1. Introduction By enabling the slow query log, M...
Table of contents 1. Synchronization Principle 2....
This example takes the installation of Python 3.8...
The article mainly records the simple installatio...
Table of contents Short Introduction 1. Check the...
Batch comments in SQL Server Batch Annotation Ctr...
Prepare Environmental information for this articl...
Arial Arial is a sans-serif TrueType font distribu...
Preface: MYSQL should be the most popular WEB bac...
I made a Dockerfile for openresty on centos7 and ...
The installation and configuration method of MySQ...
1. Add users and groups 1. Add mysql user group #...
1. An error (1064) is reported when using mysqldu...
What are XHTML tags? XHTML tag elements are the b...
Preface I recently used :first-child in a project...