z-index这个css属性是用来控制层级的,但是它的表现有点奇怪,这里做下记录。

假如有ABC三层,都没设置z-index时,是按dom节点顺序来控制层级。

此时如果B元素下有个元素D,设置了z-index:1,这个子元素会无视父元素(也就是B)的层级,直接到最高层,盖住A和C。

要让他恢复正常很简单,设置B元素的z-index:0,这样B元素仍然在A/C中间,D的z-index只对同级元素起作用,不会跑到A和C上面。

据此推断,z-index的判断逻辑应该是:

1. 父元素无z-index时,以子元素z-index为准,可以超出父元素的层级。

2. 父元素有z-index时,以父元素z-index为准,不可超出父元素层级,但是自身z-index可以在同级元素中生效。

z-index随笔的更多相关文章

  1. 运用<div>布局页面练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 关于Cewu Lu等的《Combining Sketch and Tone for Pencil Drawing Production》一文铅笔画算法的理解和笔录。

     相关论文的链接:Combining Sketch and Tone for Pencil Drawing Production 第一次看<Combining Sketch and Tone f ...

  3. 四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。

    laviewpbt  2014.8.4 编辑 Email:laviewpbt@sina.com   QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...

  4. C# 金钱 小写转大写的算法

    调用 ConvertMoney的ConvertMoneyToWords(decimal money)方法即可 using System; using System.Collections.Generi ...

  5. 【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

    最近看到一个非常有趣的益智小游戏,是一个盗贼进入房子偷东西的, 其实这种游戏市面上已经很多了,吸引我的是那个类似手电筒的效果, 主角走到哪里,光就到哪里,被挡住的地方还有阴影.有点类似策略游戏里的战争 ...

  6. 来看看css3中的box-shadow

    不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...

  7. img和css背景的选择

    在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人), ...

  8. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  9. 2016 年青岛网络赛---Family View(AC自动机)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5880 Problem Description Steam is a digital distribut ...

  10. 你知道吗?Web的26项基本概念和技术

    这是我在网上看到一篇不错的文章,拿出来与大家分享一下:希望有所帮助 作者: 小鱼  来源: 前端里  发布时间: 2014-08-01 22:56  阅读: 10477 次  推荐: 51   原文链 ...

随机推荐

  1. SVM相关知识及和softmax区别

    1.相对于容易过度拟合训练样本的人工神经网络,支持向量机对于未见过的测试样本具有更好的推广能力. 2.SVM更偏好解释数据的简单模型---二维空间中的直线,三维空间中的平面和更高维空间中的超平面. 3 ...

  2. 机器学习算法实践:决策树 (Decision Tree)(转载)

    前言 最近打算系统学习下机器学习的基础算法,避免眼高手低,决定把常用的机器学习基础算法都实现一遍以便加深印象.本文为这系列博客的第一篇,关于决策树(Decision Tree)的算法实现,文中我将对决 ...

  3. 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  4. 一起学Netty(一)之 Hello Netty

    一起学Netty(一)之 Hello Netty 学习了:https://blog.csdn.net/linuu/article/details/51306480

  5. 转:myeclipse和eclipse的区别和联系,以及版本间的对应关系

    myeclipse和eclipse的区别和联系,以及版本间的对应关系 Eclipse:IBM花了4千万美金来开发这个IDE(Integrated Development Environment).第一 ...

  6. Linux中MySQL数据库max_allowed_packet的调整

    在MySQL数据库里某表有一个blob字段,当上传文件超过1M的时候出现下面的错误: PreparedStatementCallback; SQL [insert into uos.docfile(r ...

  7. 关于其它模块的设计,有非常多须要自己去构建和完毕,在这里就简单地举几个样例来看看其它模块的设计。我们要做的就是有更改password模块,客户选择模块和关于本软件模块。更改password模块用来更改管理员的password,客户选择对话框模块用来选择已加入的客户,关于本软件模块用来说明客户管理系统的一些必要信息和制作人的信息。

            五,其它模块设计         关于其它模块的设计,有非常多须要自己去构建和完毕,在这里就简单地举几个样例来看看其它模块的设计. 我们要做的就是有更改password模块.客户选择模 ...

  8. jenkins插件安装失败更改插件源

    看提示的日志说是下载失败,应该是网络问题 最好的办法就是更改下载源 [系统管理][管理插件][高级]升级站点项的的地址修改成 修改之后,安装了一下git的插件速度非常快,jenkins镜像地址列表ht ...

  9. PHP curl post header

    第三方教程推荐:https://www.cnblogs.com/CHEUNGKAMING/p/5717429.html

  10. CoreAnimation的使用小结

    參考:http://www.cnblogs.com/wendingding/p/3801157.htmlhttp://www.cnblogs.com/wendingding/p/3802830.htm ...