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
Docker container accesses the host's MySQL operation
background: There is a flask project that provide...
MySQL query redundant indexes and unused index operations
MySQL 5.7 and above versions provide direct query...
The magic of tr command in counting the frequency of English words
We are all familiar with the tr command, which ca...
How to install mysql via yum on centos7
1. Check whether MySQL is installed yum list inst...
Will this SQL writing method really cause the index to fail?
Preface There are often some articles on the Inte...
Master the CSS property display:flow-root declaration in one article
byzhangxinxu from https://www.zhangxinxu.com/word...
Process parsing of reserved word instructions in Dockerfile
Table of contents 1. What is Dockerfile? 2. Analy...
How to mark the source and origin of CSS3 citations
I am almost going moldy staying at home due to th...
What does the legendary VUE syntax sugar do?
Table of contents 1. What is syntactic sugar? 2. ...
A Brief Analysis of Subqueries and Advanced Applications in MySql Database
Subquery in MySql database: Subquery: nesting ano...
MYSQL METADATA LOCK (MDL LOCK) theory and lock type test
Table of contents MYSQL METADATA LOCK (MDL LOCK) ...
Implementation example of Nginx+Tomcat load balancing cluster
Table of contents introduction 1. Case Overview 2...
Detailed explanation of commands to read and write remote files using Vim in Linux system
Set vim's working mode (temporary) :set (mode...
Detailed explanation of the use of Vue image drag and drop zoom component
The specific usage of the Vue image drag and drop...
Detailed explanation of how to use JS to achieve the effect of PS eraser scratch card in canvas
Table of contents Effect demonstration:Main JS co...