CSSz-index详解
CSS教程:Z-index属性
大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。
Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上的混乱和(开发者心理上)的挫败感。但滑稽的是,一旦你真正理解了Z-index,你会发现它却是一个非常容易使用的属性,并且会为解决很多layout方面的挑战提供强有力的帮助。
在这篇文章里,我们会准确的说明究竟什么是Z-index,它为什么会这么不为人所了解,并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异,那些存在于已有版本的IE及Firefox浏览器中的独特问题。这篇关于Z-index属性的全透视文章将会为那些有着良好基础的开发者在使用Z-index属性时提供强大的自信心及强有力的帮助。
这是什么?
Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。
为了更清晰的描述Z-index是如何工作的,上面的这张图片夸大展示了层叠元素在视觉位置上的关系。
自然的层叠顺序
在一个HTML页面中,自然的层叠顺序(也就是元素在Z轴上的顺序)是由很多因素决定的。下面的是一个列表,它展示的列表项是处于一个层叠环境(stacking context,暂时未找到合适的汉语翻译,应该是指层叠的元素所处的那个层叠的环境)中,这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。
元素的背景和边框会创建一个stacking context
引用:
·具有负值的stacking contexts元素,按照出现的先后顺序排列(越靠后层级越靠上)
·没有被定位,没有浮动的块级元素,按照出现的先后顺序排列
·没有被定位,浮动的元素,按照出现的先后顺序排列
·内联元素,按照出现的先后顺序排列排列
·被定位的元素,按照出现的先后顺序排列
Z-index 属性,当被正确使用的时候,会改变自然的层叠顺序。
当然,除非元素已经被定位按照互相交叠的形式展现,否则元素的层叠顺序并不会特别的明显。下面的,负边距的BOX被拿来展示,用以说明自然的层叠顺序。
上面的BOX被定义了不同的背景和边框色,并且后两个是交错的并且定义了负值的顶部边距,所以我们可以看到自然的层叠顺序。灰色的BOX在标记中位于第一位,蓝色的BOX位于第二位,金色的排在第三。应用的负边距明确的表明这个事实:这些元素未被设置Z-index 属性;它们的层叠顺序是自然的,或者是默认的,复合规则的。产生交错的现象都是因为负值的边距。
为什么它会产生混乱?
即使Z-index并不是一个难以理解的属性,但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中。
为了证明Z-index只能工作于被定位了的元素中,这里有同样的三个BOX,它们应用了Z-index属性来尝试打破他们自然的层叠顺序。
灰色的BOX具有“9999”的Z-index值,蓝色的BOX有“500”的Z-index值,金色的有“1”的Z-index值。合乎逻辑的,你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样,因为这些元素都没被设定position属性。
下面是同样的三个BOX,分别都被设置了position: relative,他们的Z-index值还是按照上面那段设定。
现在的结果是我们所期待的了:这些元素的层叠顺序实现了反向;灰色的BOX覆盖在蓝色之上,蓝色的覆盖在金色之上。
语法
#grey_box { width: 200px; height: 200px; border: solid 1px #ccc; background: #ddd; position: relative; z-index: 9999;
}
#blue_box { width: 200px; height: 200px; border: solid 1px #4a7497; background: #8daac3; position: relative; z-index: 500;
}
#gold_box { width: 200px; height: 200px; border: solid 1px #8b6125; background: #ba945d; position: relative; z-index: 1;
}
重复一下,Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视,尤其是对于那些新手。
CSSz-index详解相关推荐
- MySQL Index详解
①MySQL Index 一.SHOW INDEX会返回以下字段 1.Table 表的名称. 2. Non_unique 如果索引不能包括重复词,则为0,如果可以则为1. 3. Key_name 索引 ...
- Pandas index详解
总括 pandas里对索引的操作主要有 DataFrame.rename DataFrame.rename_axis DataFrame.reindex DataFrame.reindex_axis ...
- mysql数据库中index什么意思_MySQL Index详解
FROM:http://blog.csdn.net/tianmo2010/article/details/7930482 ①MySQL Index 一.SHOW INDEX会返回以下字段 1.Tabl ...
- mysql index_MySQL Index详解
FROM:http://blog.csdn.net/tianmo2010/article/details/7930482 ①MySQL Index 一.SHOW INDEX会返回以下字段 1.Tabl ...
- CPUID详解[增加TLB与Cache]
From: http://bbs.pediy.com/showthread.php?threadid=21646 标 题: CPUID详解[增加TLB与Cache] 作 者: Pr0Zel 时 间: ...
- CPUID详解_转载百度
CPUID是Intel Pentium以上级CPU内置的一个指令(486级及以下的CPU不支持),它用于识别某一类型的CPU,它能返回CPU的级别(family),型号(model),CPU步进(St ...
- 详解 CSS3中最好用的布局方式——flex弹性布局(看完就会)
文章包含个人理解,错误请指出. 往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会 ...
- [前端CSS高频面试题]如何画0.5px的边框线(详解)
往期css3文章 详解 CSS3中最好用的布局方式--flex弹性布局(看完就会) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之 ...
- 【Transform3D】转换详解(看完就会)
文章内包含个人理解,如有错误请指出. 往期文章 [css动画]移动的小车 [CSS3] float浮动与position定位常见问题(个人笔记) 如何完成响应式布局,有几种方法?看这个就够了 详解 ...
- CSS3动画属性 animation详解(看完就会)
CSS3动画属性 animation 文章包含个人理解错误请指出 往期文章 [css高级]变量详解 轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
最新文章
- 声明一个const数组
- 皮一皮:程序猿表示这点不够退休...
- 分享HTML 5的参考手册,演讲稿,电子书和教程
- codeforces 149E . Martian Strings kmp
- Ffmpeg框架结构解读
- matlab仿真环境运行,第7章 Simulink仿真环境.ppt
- 单片机基础——C语言
- Hibernate框架搭建
- 2022年P气瓶充装考试模拟100题模拟考试平台操作
- 如何选择毕业设计的题目?
- LIME-论文阅读笔记
- 微机原理与接口技术模拟试题微型计算机中主要包括,微机原理与接口技术模拟试题...
- 熔断机制什么意思_熔断机制是什么意思?
- 第十一届蓝桥杯大赛软件类决赛(C/C++ 大学A组)
- 淘宝商品api,天猫商品api,京东商品api,1688商品api,速卖通商品api,微商相册api,拼多多商品api
- 单片机八灯交替闪烁c语言代码,单片机闪烁灯汇编语言源代码大全(四款闪烁灯的汇编语言源代码)...
- 通过shell脚本来rerun一个oozie调度失败的job,从而可以跳过执行失败的节点
- 【算法竞赛】力扣杯春赛-个人赛 LCCUP‘23复盘
- Android四大组件之Activity(intent、ActivityThread)
- 【keil5】keil5仿真STM32设置