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
How to simulate network packet loss and delay in Linux
netem and tc: netem is a network simulation modul...
How to implement Docker container self-start
Container auto-start Docker provides a restart po...
How to Run a Command at a Specific Time in Linux
The other day I was using rsync to transfer a lar...
Detailed explanation of Vue transition effects and animation transition usage examples
Table of contents transition hook function Custom...
Navicat for MySQL tutorial
First, you need to download and install Navicat f...
Installation of mysql5.7 and implementation process of long-term free use of Navicate
(I) Installation of mysql5.7: ❀ Details: The inst...
SQL Get stored procedure return data process analysis
This article mainly introduces the analysis of th...
CSS uses BEM naming convention practice
When you see a class, what information do you wan...
Summary of several implementations of returning to the top in HTML pages
Recently, I need to make a back-to-top button whe...
The ultimate solution to the problem of Chinese garbled characters in tomcat static pages (html)
In tomcat, jsp is not garbled, but html Chinese i...
vue3 custom directive details
Table of contents 1. Registering custom instructi...
Detailed explanation of HTML form elements (Part 1)
HTML forms are used to collect different types of...
Practice of using Tinymce rich text to customize toolbar buttons in Vue
Table of contents Install tinymce, tinymce ts, ti...
React handwriting tab switching problem
Parent File import React, { useState } from '...
Analysis of MySQL crash recovery based on Redo Log and Undo Log
Table of contents MySQL crash recovery process 1....