z-index的理解
一、基本概念
z-index 属性是设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序
较低的元素的前面。
元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效(例如 position:absolute;)。
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如
果为正数,则离用户更近,为负数则表示离用户更远。
二、它可能出现的值:
三、层级关系的比较
- 对于同级元素,默认(或 position:static)情况下文档流后面的元素会覆盖前面的。
- 对于同级元素,position 不为 static 且 z-index 存在的情况下 z-index 大的元素
会覆盖 z-index 小的元素,即 z-index 越大优先级越高。 - IE6/7 下 position 不为 static,且 z-index 不存在时 z-index 为 0,除此之外的浏
览器 z-index 为 auto。 - z-index 为 auto 的元素不参与层级关系的比较,由向上遍历至此且 z-index 不为
auto 的元素来参与比较
四、顺序规则
如果不对节点设定 position 属性,位于文档流后面的节点会遮盖前面的节点。
<div class="A">A</div><div class="B">B</div>
五、定位规则
(1)如果将 position 设为 static,位于文档流后面的节点依然会遮盖前面的节点 浮动,,所以 position:static 不会影响节点的遮盖关系。
<div id="a" style="position:static;">A</div><div id="b">B</div>
(2)如果将 position 设为 relative (相对定位),absolute (绝对定位) 或者 fixed
(固定定位),这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节
点,说明前者比后者的默认层级高。
<div id="a" style="position:relative;">A</div><div id="b">B</div>
(3) 在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出
更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设
定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A’ 会覆盖 B.
<div id="a"><div id="a-1" style="position:relative;">A-1</div></div><div id="b">B</div>
六、参与规则
我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节
点没起作用. z-index 属性仅在节点的 position 属性为 relative, absolute 或者
fixed 时生效.
例一:
<div id="a" style="z-index:2;">A</div><div id="b" style="z-index:1;">B</div><div id="c" style="z-index:0;">C</div>
例二:
<div id="a" style="z-index:2;">A</div><div id="b" style="position:relative;z-index:1;">B</div><div id="c" style="position:relative;z-index:0;">C</div>
七、默认值规则
如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 zindex 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义
z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.
<div id="a" style="position:relative;z-index:1;">A</div><div id="b" style="position:relative;z-index:0;">B</div><div id="c" style="position:relative;">C</div><div id="d" style="position:relative;z-index:0;">D</div>
八、从父规则
如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那
么 A 的子节点必定覆盖在 B 的子节点前面.
<div id="a" style="position:relative;z-index:1;"><div id="a-1">A-1</div></div><div id="b" style="position:relative;z-index:0;"><div id="b-1">B-1</div></div>
如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大,
但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的
子节点大, B 的子节点还是会覆盖在 A 的子节点前面.
很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响,
设得再大也没用, 那是无法逾越的层级.
z-index的理解相关推荐
- sqlserver聚合索引(clustered index) / 非聚合索引(nonclustered index)的理解
1. 什么是聚合索引(clustered index) / 什么是非聚合索引(nonclustered index)? 可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索 ...
- HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
- 假设检验、显著性水平、P值、Z值的理解
目录 一.什么是假设检验 二.弃真错误.取伪错误 三.显著性水平 α\alphaα.ppp值.zzz值.置信区间.置信度的含义 四.原假设同备择假设是否可以互换 一.什么是假设检验 假设检验( ...
- js怎么设置z index.html,HTML5 Canvas set z-index
j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似. 回答者markE给出了该问题的处理方式: Yes..kind of yes. You ...
- html设置z index.html,CSS中z-index属性的使用方法和示例介绍
怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- 深入理解CSS中的层叠上下文和层叠顺序
转载一篇张鑫旭大神的文章(对于理解GPU硬件加速和网页分层还是有一点帮助的),原文地址:深入理解CSS中的层叠上下文和层叠顺序 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论 ...
- mysql 索引合并_MySQL 索引合并(Index Merge)优化
本文问题 什么是Index Merge?Index Merge的限制有哪些? 如何查看语句是否使用了Index Merger? Index Merge有哪几种?分别适用于那些情景? 如何控制优化器是否 ...
- css索引_CSS中的Z索引:它是什么以及它做什么
css索引 什么是Z索引? (What is a Z Index?) Z Index (z-index) is a CSS property that defines the order of ove ...
- 试写一算法,自大至小依次输出顺序读入的三个整数X,Y和Z的值
#include<stdio.h> int main() {//该算法的目的是x>y>z//为了方便理解,我们可以理解为第一个容器的数值>第二个容器的数值>第三个容 ...
最新文章
- UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xb0 in position 0: invalid start byte
- Android提供的LruCache类简介
- java 获取光标_如何在java中使用Windows API获取当前鼠标光标类型?
- CF :K 一个含n条边的带权无向连通图,q次查询,每次查询两点间的最短距离。...
- Flask爱家租房--房屋管理(获取房东发布的房源信息条目)
- qtp12版本下载安装破解教程
- ios java 加密_AES加密 - iOS与Java的同步实现
- PyTorch系列入门到精通——模型创建与nn.Module
- 数据之路 - Python爬虫 - Scrapy框架
- leap通过掌心或手指的某一关节做一条射线
- linux下查看已经安装的jdk 并卸载jdk的方法
- 电商后台管理系统项目总结(一)
- 晶体二极管和晶体三极管
- 17python实操案例五
- 怎么恢复删除的文件?实用小妙招
- 对抗鲁棒性使得神经网络又强又怂
- 计算机游戏者战略编写员教程
- 云南贵州地区市场知名的调查研究咨询公司
- 误删暂存代码的恢复方法
- love2d 苹果运行
热门文章
- JavaScript取整数
- r730 linux找不到硬盘,Dell R730 安装Linux后启动失败
- Java SE进阶知识
- P2-Vue3后台管理系统-配置scss全局变量
- win10电脑如何使用本地账户登录
- 蓝牙耳机半入耳推荐,2022半入耳运动蓝牙耳机推荐
- Django基础(6): 模型Models高级进阶必读。
- win10计算机误卸载,Windows10系统补丁被误卸载的两种解决方法
- android9.0魅族16,flyme太卡?魅友抢先为魅族16适配安卓9.0,还有MIUI10
- ppt合并形状的一些操作