本篇文章来给大家介绍一下 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 等. 这就好比球队, 人人都想当老大, 最后结果是个很有味道的屎.
本文转载自: https://www.cnblogs.com/wuchaofan1993/p/10194732.html
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17160.html