css z-index详解
写css z-index的时候经常会出现很多莫名其妙的问题,下面对z-index属性做彻底的剖析,本文参考了《一个css中z-index的用法》,并做了很多demo,方便了解z-index的用法.
一、z-index是什么
z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。为了更清晰的描述Z-index是如何工作的,这张图片夸大展示了层叠元素在视觉位置上的关系。
二、自然层叠顺序demo
为了更好的表现出最基本的层叠,看下面的demo,地址 http://jsbin.com/yezisino/1/edit
html代码:
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
css:
.blue,.green,.red{
width:200px;
height:200px;
}
.blue{
background:blue;
}
.green{
background:green;
margin-top:-100px;
margin-left:50px;
}
.red{
background:red;
margin-top:-100px;
margin-left:100px;
}
效果图:
三、验证z-index
为了验证z-index的作用,对上述代码进行修改,实例如下
分别把blue green red的z-index设置为999 99 9,但是看上去好像和之前没什么变化,原因是因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中。so 我们继续对css做一些修改:
如图所示,显示的顺序已经按照我们设置的z-index大小展现了
四、多个父元素中子元素的z-index设置
在原基础之上,我们对html和css做一些改动,验证一下父元素不同的情况下 ,子元素设置不同的z-index显示效果
可以很明显的看出,不同父元素的子元素之间进行显示时,会根据父级元素的z-index进行渲染.
五、世上本没有z-index
要有这样子的意识:absolute
是一个能够独当一面的属性,其使用可以不要relative
,当然,也可以不使用z-index
。在默认情况下,元素应用了非static
的position
属性后,其就会有一个隐晦的层级,会居于普通元素之上,无需额外设置z-index属性值。
然而,眼观现实世界,z-index属性值的滥用跟absolute属性值的滥用有的一拼——只要用到绝对定位/相对定位的地方就要设置一个z-index值,以表示自己的地位。结果,N多个z-index之后,网站前端换人之后,页面的z-index层级混乱了,为了让新添加元素上面显示,不惜设置z-index
的值为999
或是9999
等。这就好比球队,人人都想当老大,最后结果是个很有味道的屎。
css z-index详解的更多相关文章
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- [转]CSS vertical-align属性详解 作者:黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- CSS绝对定位absolute详解
转:https://www.jianshu.com/p/a3da5e27d22b 之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...
- css 14-CSS3属性详解:Web字体
14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- css文本格式详解
一.css文本主体内容: 二.css文本详解: 1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...
- CSS transition 过渡 详解
transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...
随机推荐
- C#中的异常处理
C#中的异常处理 while (ex != null) { WriteExceptionLog(ex, fileName); ex = ex.InnerException; } /// <sum ...
- URAL1017. Staircases
链接 简单递推 #include <iostream> #include<cstdio> #include<cstring> #include<algorit ...
- MapReduce的数据流程、执行流程
MapReduce的数据流程: 预先加载本地的输入文件 经过MAP处理产生中间结果 经过shuffle程序将相同key的中间结果分发到同一节点上处理 Recude处理产生结果输出 将结果输出保存在hd ...
- (转载)php array_merge 和 两数组相加区别
(转载)http://www.cnblogs.com/shistou/archive/2013/03/16/2963586.html PHP中两个数组合并可以使用+或者array_merge,但之间还 ...
- ReentrantReadWriteLock读写锁的使用
Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 读写锁:分为读 ...
- feed4junit 实现junit4框架体系下数据驱动
junit 是一款很好用的测试框架,但是该框架在并行和数据驱动方面没有提供支持,往往我们队这2个需求是很迫切的,不过有需求就会有人去做,有心思的人出现了,feed4junit 出现了,弥补了junit ...
- 【转】Kinect使用
文章转自http://blog.csdn.net/yangtrees/article/details/16106271 Kinect中深度值最大为4096mm (0x0fff) 微软建议在开发中使用1 ...
- 非递归实现先序遍历 java leecode 提交
写完才知道自己学习都是似是而非啊,大家可以也在leecode上提交代码,纯手写,离开eclipse第一种方式:数据结构书上的,使用栈大概思路.1.不断将根节点的左孩子的左孩子直到为空,在这个过程入栈. ...
- mini2440触摸屏驱动分析
mini2440驱动分析系列之 ---------------------------------------Mini2440触摸屏程序分析 By JeefJiang July,8th,2009 这是 ...
- HNU 13375 Flowery Trails (spfa最短路)
求最短路径覆盖的全部边权值和. 思路:分别从起点和终点两次求最短路,再比较两个点到起点的距离和他们之间的权值相加和是否等于最短路径. 这题很好 #include <cstring> #in ...