z-index不起作用


Posted in HTML / CSS onMarch 31, 2021

 一对兄弟节点,insert和parent,parent有两个子节点subtop和subbottom,展现的结果是想让subtop在insert上面,subbottom在insert下面,

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .insert{
            position: relative;
            z-index:100;
            background: green;
            width:300px;
            height:300px;
            top:100px;
        }
        .parent{
            /*position:relative;
            z-index: 1000;*/
            width:200px;
            height:200px;
            /*left:0;
            top:-50px;*/
            border:1px solid #eee;
        }
        .subbottom{
            position:relative;
            z-index: 50;
            width:200px;
            height:200px;
            background: red;
            top:-100px;
            left:0;
 
        }
        .subtop{
            position: relative;
            z-index:1100;
            width:100px;
            height:100px;
            left:0;
            top:0;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="insert"></div>
    <div class="parent">
        <div class="subtop"></div>
        <div class="subbottom"></div>
    </div>
</body>
</html>

其实原理也很简单,就是利用了z-index的覆盖问题,在写的过程中我发现无论怎么改变,insert的z-index总是无效的,于是百度了一下z-index无效的情况,一共有三种:

  1. 父标签 position属性为relative;
  2. 问题标签无position属性(不包括static);
  3. 问题标签含有浮动(float)属性。

这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了,他的解决办法有是三个:

  1. position:relative改为position:absolute;
  2. 浮动元素添加position属性(如relative,absolute等);
  3. 去除浮动。

所以,去掉parent的position和z-index,达到了我想要的效果。

HTML / CSS 相关文章推荐
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
元素水平垂直居中的方式
Mar 31 #HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
简单实现一个手持弹幕功能+文字抖动特效
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 #HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
You might like
第十三节--对象串行化
2006/11/16 PHP
php文件读取方法实例分析
2015/06/20 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
vue实现文字加密功能
2019/09/27 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
浅谈Python 的枚举 Enum
2017/06/12 Python
Python延时操作实现方法示例
2018/08/14 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
公司市场部岗位职责
2013/12/02 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
个人务虚会发言材料
2014/10/20 职场文书
邀请函格式范文
2015/02/02 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
行为规范主题班会
2015/08/13 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python