CSS 之 z-index 属性详解
一、简介
本文主要是对z-index
属性进行详细的讲解,包括其使用场景、属性效果、适用范围等等。本博客的所有代码执行的浏览器环境,都是以Chrome浏览器为准。
1、属性作用
z-index
属性是用来设置元素的堆叠顺序或者叫做元素层级,z-index
的值越大,元素的层级越高。当元素发生重叠时,层级高的元素会覆盖在层级低的元素的上面,使层级低的元素的重叠部分被遮盖住。
当父元素设置了z-index
属性时,子元素的z-index
属性只与同级元素和父级元素作比较时才有意义,与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时,都以父元素的z-index
属性值为准进行对比,子元素本身的z-index
属性值无效。
当父元素未设置了z-index
属性,子元素的z-index
属性与父元素外的所有的外部元素进行堆叠层级顺序对比时,都以元素本身的z-index
属性值为准进行对比。
2、取值范围
z-index
属性的值分为三种:auto(默认值):与父元素的层级相等,如各级祖先元素均未设置该属性,则类似于0
、number:整数数值,在兼容所有浏览器的情况下取值范围是 -2147483584 ~ 2147483584,数值越大,层级越高,数值越小,层级越低
、inherit:继承父元素的z-index的属性值
3、适用范围
z-index
属性只能在设置了position: relative | absolute | fixed
的元素和父元素设置了 display: flex
属性的子元素中起作用,在其他元素中是不作用的。
二、使用场景
1、同级元素之间
① 两个设置了定位且z-index
属性值不同的同级元素
他们之间的层级,由z-index
属性值决定,属性值大的,层级高,显示在前面。
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;z-index: 9; /* z-index属性值小 */background-color: blanchedalmond;}.box2 {position: relative;top: -100px;left: 100px;z-index: 99; /* z-index属性值大 */background-color: blueviolet;}</style><div class="box1">盒子1</div><div class="box2">盒子2</div>
页面效果:
① 两个设置了定位且z-index
属性值相同的同级元素
由于z-index
属性值相同,所以他们之间的层级,由元素的书写顺序决定,后面的元素会覆盖在前面的元素上面。
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;z-index: 99; /* z-index属性值相同 */background-color: blanchedalmond;}.box2 {position: relative;top: -100px;left: 100px;z-index: 99; /* z-index属性值相同 */background-color: blueviolet;}</style><div class="box1">盒子1</div><div class="box2">盒子2</div>
页面效果:
③两个设置了定位且一个设置了z-index
属性一个没设置z-index
属性的同级元素
未设置z-index
属性的元素,则取默认值0,如果设置了z-index
属性的元素的z-index
属性值大于0,则该元素的层级会高于未设置z-index
属性的元素:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;z-index: 1; /* z-index属性值大于0 */background-color: blanchedalmond;}.box2 {position: relative;top: -100px;left: 100px;background-color: blueviolet;}</style><div class="box1">盒子1</div><div class="box2">盒子2</div>
页面效果:
但是如果设置了z-index
属性的元素的z-index
属性值小于0,则该元素的层级会低于未设置z-index
属性的元素:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;z-index: -1; /* z-index属性值小于0 */background-color: blanchedalmond;}.box2 {position: relative;top: -100px;left: 100px;background-color: blueviolet;}</style><div class="box1">盒子1</div><div class="box2">盒子2</div>
页面效果:
还有最后一种情况,那就是当设置了z-index
属性的元素的z-index
属性值为0的时候,这时设置了z-index
属性的元素与未设置z-index
属性的元素层级相同,遵循后面的元素覆盖前面元素的规则:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;z-index: 0; /* z-index属性值等于0 */background-color: blanchedalmond;}.box2 {position: relative;top: -100px;left: 100px;background-color: blueviolet;}</style><div class="box1">盒子1</div><div class="box2">盒子2</div>
页面效果:
2、父子元素之间
① 父元素未设置z-index
属性,子元素设置了z-index
属性
当子元素的z-index
属性值大于等于 0 时,子元素的层级会高于父元素的层级,而当子元素的z-index
属性值小于 0 时,子元素的层级会低于父元素的层级:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: 0; /* z-index的值大于等于0 */}.box1-son2 {position: relative;width: 100px;height: 100px;margin: auto;z-index: -1; /* z-index的值小于0,层级低,被父元素挡住 */background-color: red;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div><div class="box1-son2">盒子1的子盒子2</div></div>
页面效果:
② 父元素设置了z-index
属性,子元素未设置z-index
属性
在这种情况下,无论父元素的z-index
属性值为多少,子元素的层级永远高于父元素,子元素永远会挡住父元素的内容:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;z-index: 9999; /* z-index的值很大 */}.box1-son1 { /* 未设置z-index */position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div>
页面效果:
③ 父元素设置了z-index
属性,子元素也设置了z-index
属性
在这种情况下,无论子元素和父元素的z-index
属性值为多少,子元素的层级永远高于父元素,子元素永远会挡住父元素的内容:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;z-index: 9999; /* z-index的值很大 */}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: -9999; /* z-index的值很小 */}.box1-son2 {position: relative;width: 100px;height: 100px;margin: auto;z-index: 0; /* z-index的值等于0 */background-color: red;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div><div class="box1-son2">盒子1的子盒子2</div></div>
页面效果:
3、子元素与其父元素外的其他元素之间
① 父元素未设置z-index
属性,子元素z-index
属性值与父元素的同级元素z-index
属性值进行对比
因为是跟父元素的同级元素进行对比,且父元素未设置z-index
,所以是以子元素的z-index
属性值为准与父元素的同级元素进行对比,遵循z-index
属性值大的元素,层级高规则,以及层级相同时,后面元素覆盖前面元素的规则。
当子元素z-index
属性值小于父元素的同级元素z-index
属性值:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;/* z-index未设置 */}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: 99; /* z-index的值大 */}.box2 {position: relative;margin: -100px 0 0 100px;z-index: 9;/* z-index的值小 */background-color: blueviolet;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div><div class="box2">盒子2</div>
页面效果:
当子元素z-index
属性值小于等于其父元素的同级元素z-index
属性值:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;/* z-index未设置 */}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: 1; /* z-index的值小 */}.box2 {position: relative;margin: -100px 0 0 100px;z-index: 9;/* z-index的值大 */background-color: blueviolet;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div><div class="box2">盒子2</div>
页面效果:
② 父元素设置了z-index属性,子元素z-index属性值与父元素的同级元素z-index属性值进行对比
因为是跟父元素的同级元素进行对比,且父元素设置了z-index
,所以是以父元素的z-index
属性值为准与父元素的同级元素进行对比,同样遵循z-index
属性值大的元素,层级高规则,以及层级相同时,后面元素覆盖前面元素的规则。
当父元素的z-index
属性值小于等于父元素的同级元素的z-index
属性值,但子元素的z-index
属性值大于父元素的同级元素的z-index
属性值:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;z-index: 0; /* z-index设置 */}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: 999; /* z-index的值大 */}.box2 {position: relative;margin: -100px 0 0 100px;z-index: 9;/* z-index的值小 但是大于 box1 的z-index */background-color: blueviolet;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div><div class="box2">盒子2</div>
页面效果:
当父元素的z-index
属性值大于父元素的同级元素的z-index
属性值,但子元素的z-index
属性值小于父元素的同级元素的z-index
属性值:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;z-index: 99; /* z-index设置 */}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: -9; /* z-index的值小 */}.box2 {position: relative;margin: -100px 0 0 100px;z-index: 9;/* z-index的值小 但是大于 box1 的z-index */background-color: blueviolet;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div><div class="box2">盒子2</div>
页面效果:
③ 父元素均未设置z-index
属性,子元素Az-index
属性值与父元素的同级元素的子元素Bz-index
属性值进行对比
这种情况比较特殊,元素之前的堆叠顺序,需要分开一一进行比较。首先将每个子元素与其父元素进行比较,再将第一次比较中两个层级低的进行比较,然后将上次比较中两个层级高的进行比较,最后再将第二次比较中层级高的与第三次比较中层级低的进行比较,最终就可以得出结果。
当子元素A的z-index
属性值大于子元素Bz-index
属性值时:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;background-color: blanchedalmond;}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: 99; /* z-index的值大 */}.box2 {position: relative;margin: -120px 0 0 80px;background-color: blueviolet;}.box2-son1 {position: relative;width: 100px;height: 100px;z-index: 9; /* z-index的值小 */background-color: green;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div><div class="box2">盒子2<div class="box2-son2">盒子2的子盒子2</div></div></div>
页面效果:
④ 父元素A和B均设置了z-index
属性,子元素A1z-index
属性值与父元素的同级元素的子元素B1z-index
属性值进行对比
当父元素设置了z-index
属性时,子元素的z-index
属性只与同级元素和父级元素作比较时才有意义,与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时,都以父元素的z-index
属性值为准进行对比,子元素本身的z-index
属性值无效。
当父元素A的z-index
属性值大于父元素B的z-index
属性值,但子元素A1z-index
属性值小于子元素B1z-index
属性值时:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;z-index: 99;background-color: blanchedalmond;}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: -99; /* z-index的值小 */}.box2 {position: relative;margin: -120px 0 0 80px;z-index: 9;background-color: blueviolet;}.box2-son1 {position: relative;width: 100px;height: 100px;z-index: 98; /* z-index的值大 */background-color: green;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div><div class="box2">盒子2<div class="box2-son2">盒子2的子盒子2</div></div></div>
页面效果:
④ 父元素A设置了z-index
属性,父元素B未设置,子元素A1z-index
属性值与子元素B1z-index
属性值进行对比
这又是一个比较复杂的情况,首先将未设置z-index
属性的父元素B与其子元素B1进行对比,然后将第一次对比中层级高的与父元素A进行对比,再将第一次对比中层级低的与第二次对比中层级低的进行对比,最后将两个子元素的层级进行对比,这样就可得出最终的层级顺序:
代码:
<style>div {width: 200px;height: 200px;}.box1 {position: relative;z-index: 9;background-color: blanchedalmond;}.box1-son1 {position: relative;width: 100px;height: 100px;margin: auto;background-color: #ccc;z-index: -99; /* z-index的值小 */}.box2 {position: relative;margin: -120px 0 0 80px;background-color: blueviolet;}.box2-son1 {position: relative;width: 100px;height: 100px;z-index: 98; /* z-index的值大 */background-color: green;}</style><div class="box1">盒子1<div class="box1-son1">盒子1的子盒子1</div></div><div class="box2">盒子2<div class="box2-son2">盒子2的子盒子2</div></div></div>
页面效果:
⑤ 其他情况
4、父元素设置了display: flex
,子元素之间对比
其规则相当于同级子元素之间的对比,z-index
属性值大的元素,层级高:
代码:
<style>div {width: 200px;height: 200px;}.box2 {display: flex;margin: 0px 0 0 80px;background-color: blueviolet;}.box2-son1 {width: 100px;height: 100px;z-index: 9;background-color: green;}.box2-son2 {width: 100px;height: 100px;margin-left: -20px;z-index: 8;background-color: yellow;}</style><div class="box2">盒子2<div class="box2-son1">盒子2的子盒子1</div><div class="box2-son2">盒子2的子盒子2</div></div>
页面效果:
4、父元素A设置了display: flex
,父元素B设置了position
和z-index
,两者各级元素之间的对比,与上面的两个设置了position
的父元素之间进行对比的规则,是相同的。
略。。。
CSS 之 z-index 属性详解相关推荐
- css动画-animation各个属性详解(转)
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
- 【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构 创建DIV <div class="div1">1 </div> 样式 widt ...
- 【青山css】css3阴影效果属性详解及创意玩法
前言 css阴影效果是我们经常使用的一个css属性,但你有仔细了解过它吗?是不是用的时候直接从蓝湖上复制过来就行了,那你了解它的每个参数吗?用阴影又能实现哪些好看的效果呢?来看一看我收集总结的css阴 ...
- CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- CSS中的text-overflow属性详解 (控制文字在一行显示,超出部分加省略号)
text-overflow: ellipsis; 表示当文本内容超出所在容器的宽度时,用省略号来代替超出的部分. white-space:nowrap; 表示文本不换行. overflow: hidd ...
- 【CSS知识点】——display属性详解
文章目录 display属性 dispaly属性的作用 display的分类 display-outside(外部值) display-inside(内部值) 使用flex实现上下左右居中: 使用fl ...
- HTML/CSS中文本text属性详解
我们可以通过添加一些HTML标记和CSS属性来设置text文本的样式. HTML中的标记包括结构化标记和语义化标记两种,结构化标记简单来说是用来标记标题和段落的,而语义化标记则是不会影响到网页的结构. ...
- css动画-animation各个属性详解(通俗易懂)
https://blog.csdn.net/chritina/article/details/99623017
- HTML+CSS教程(十)css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
- (图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解 声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
最新文章
- LeetCode中等题之区域和检索 - 数组可修改
- python伪装浏览器https_python伪造HTTP-REFERER
- 3.16 按绩点排名
- 一个优雅的报警处理系统范例
- 动态规划_01背包问题_Java实现
- 多闪实名举报河南法院;ofo 内部发反腐文件;库克访华点赞故宫 App | 极客头条...
- 打造自己的数据访问层(一)
- H264--1--编码原理以及I帧B帧P帧、ptsdts
- 【扩频通信】基于matlab GUI扩频通信系统仿真【含Matlab源码 772期】
- 辞职信格式模板和范文参考
- U盘安装fedora 9
- C++:error: passing ‘const string’ as ‘this’ argument discards qualifiers [-fpermissive]
- Java版本和JDK版本对应关系
- 颗粒物检测仪常用的三种检测方法
- [网页设计]如何在Photoshop里画虚线?
- Deliberated Domain Bridging for Domain Adaptive Semantic Segmentation
- Kafka启用SASL_PLAINTEXT动态配置JAAS文件的几种方式
- 货郎担问题(TSP问题)
- 前后端分离框架跨域问题解决
- 如何利用Python词云和wordart可视化工具对朋友圈数据进行可视化展示