CSS3关于z-index不生效问题的解决


Posted in HTML / CSS onFebruary 19, 2020

最近写CSS3和js结合,遇到了很多次z-index不生效的情况:

1.在用z-index的时候,该元素没有定位(static定位除外)

2.在有定位的情况下,该元素的z-index没有生效,是因为该元素的子元素后来居上,盖住了该元素,解决方式:将盖住该元素的子元素的z-index设置为负数

下拉框例子:

1.盖住的时候:

CSS3关于z-index不生效问题的解决

2.将下拉框的z-index设置为负数

CSS3关于z-index不生效问题的解决

代码:

<!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>无标题文档</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; 是一瞬间的事*/
    transition: all 1s;
    opacity: 0;
    /*后来的盒子会盖住前面的盒子,就算前面的盒子z-index再大也会被盖住,
    不过可以设置后来的盒子的z-index为负数就行了*/
    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>一级菜单
            <ul >
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul >
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul >
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    // 获取对象     遍历对象操作     显示模块   隐藏模块

    function List(id) {  //  获取对象
        this.id = document.getElementById(id);
        // 取 id 值
        this.lis = this.id.children[0].children;  // 获取一级菜单所有的li
    }
    // init 初始化
    List.prototype.init = function() {  // 遍历所有的li 显示和隐藏
        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]);  //  显示出来
            }
            this.lis[i].onmouseout = function() {
                that.hide(this.children[0]);  // 隐藏起来
            }
        }
    }
    //  显示模块
    List.prototype.show = function(obj) {
//        obj.style.display = "block";
        obj.className = "show";

    }
    // 隐藏模块
    List.prototype.hide = function(obj) {
//        obj.style.display = "none";
        obj.className = "lvTow";
    }
    var list = new List("list");  // 实例化了一个对象 叫  list
    list.init();
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

HTML / CSS 相关文章推荐
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 #HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 #HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 #HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 #HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 #HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 #HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 #HTML / CSS
You might like
支持oicq头像的留言簿(一)
2006/10/09 PHP
php xml实例 留言本
2009/03/20 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
js 操作符汇总
2014/11/08 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python批量修改文本文件内容的方法
2016/04/29 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python面向对象 反射原理解析
2019/08/12 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python能自学吗
2020/06/18 Python
《火烧云》教学反思
2014/04/12 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
物业保安辞职信
2015/05/12 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
React自定义hook的方法
2022/06/25 Javascript
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS