浅谈z-index
z-index使用条件
CSS3之前,z-index属性只有和定位元素在(postion不为static的元素)一起的时候才会有作用,但CSS3中flex盒子的子元素也可以设置z-index。理论上来说,数值越大层级越高,然实际上不是
层叠规则
谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个
后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素
在看张鑫旭的《CSS3世界中》:层叠上下文可以嵌套,内层层叠上下文及其所有子元素均受制于外部的层叠上下文
<div style="position:relative; z-index:auto;">
<!-- 美女 -->
<img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:auto;">
<!-- 美景 -->
<img src="2.jpg" style="position:relative; z-index:1;">
</div>
<div style="position:relative; z-index:0;">
<!-- 美女 -->
<img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:0;">
<!-- 美景 -->
<img src="2.jpg" style="position:relative; z-index:1;">
</div>
代码结果:
第一个例子父级z-index值为auto,第二个例子父级z-index值为0,仅此不同,然后一个是1在上,一个是2在上,为什么呢?别着急,往下看哈
其实单纯从层叠水平上看,实际上z-index:auto和z-index:0是可以看成一样的,注意我说的是单纯从层叠水平上看,实际上两者在层叠上下文领域有着根本性的差异。
z-index:auto所在的div元素是一个普通定位元素,于是他们的子级层叠比较就不受父级影响,两者直接遵循我们上面提到的层叠准则:“谁大谁上”,所以第一个元素的子级z-index:2比第二个元素的子级z-index:1大,所以第一个div就在上面显示
注意:当我们为元素设置了定位(除值为static外),但没有为其设置z-index时,就默认z-index值为auto
而z-index一旦变成数值,哪怕是0,就会创建一个层叠上下文,此时层叠规则就发生了变化,层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。所以两个子级的div层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里由于外面两个div元素都是z-index:0;两者的层叠顺序一样大,此时遵循层叠原则中的“后来居上”,根据在DOM文档流中的位置决定谁在上面,于是2就在上面了,所以此时子元素的z-index没有起作用
参考书籍:
张鑫旭《CSS世界》
浅谈z-index的更多相关文章
- [2009国家集训队]小Z的袜子(hose) 浅谈莫队
浅谈莫队 推荐学习博客 http://foreseeable97.logdown.com/posts/158522-233333 借用题目: bzoj 2038 2009 国家集训队 小Z的袜子htt ...
- 浅谈OCR之Onenote 2010
原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...
- 浅谈SQL优化入门:3、利用索引
0.写在前面的话 关于索引的内容本来是想写的,大概收集了下资料,发现并没有想象中的简单,又不想总结了,纠结了一下,决定就大概写点浅显的,好吧,就是懒,先挖个浅坑,以后再挖深一点.最基本的使用很简单,直 ...
- MCMC 浅谈
# MCMC 浅谈 1. 采样(sampling)是什么 MCMC在采样算法中有着举足轻重的地位,那么什么是采样?采样就是根据某种分布生成样本.举个例子,线性同余发生器就是根据均匀分布生成样本,这就很 ...
- 浅谈angular2+ionic2
浅谈angular2+ionic2 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2 ...
- iOS开发之浅谈MVVM的架构设计与团队协作
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...
- 浅谈Hybrid技术的设计与实现第三弹——落地篇
前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...
- 浅谈Hybrid技术的设计与实现第二弹
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
- 浅谈Hybrid技术的设计与实现
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...
- python浅谈正则的常用方法
python浅谈正则的常用方法覆盖范围70%以上 上一次很多朋友写文字屏蔽说到要用正则表达,其实不是我不想用(我正则用得不是很多,看过我之前爬虫的都知道,我直接用BeautifulSoup的网页标签去 ...
随机推荐
- PS快速调出天蓝色清新外景
原片: 一.调整光比 曝光 黑白灰. 二.调整色温(新手可用白平衡工具.左上角第3个)调整饱和度(自然饱和度和蓝原色) 三.互补色的运用(高光偏黄 加的蓝色 暗部发蓝青色 加的橙黄色) 四.调整好照片 ...
- [转帖]十二 个经典 Linux 进程管理命令介绍
https://www.cnblogs.com/swordxia/p/4550825.html 接了 http referer 头 没法显示图片 可以去原始blog 里面去查看. 随笔- 109 ...
- 多线程之:MESI-CPU缓存一致性协议
MESI(Modified Exclusive Shared Or Invalid)(也称为伊利诺斯协议,是因为该协议由伊利诺斯州立大学提出)是一种广泛使用的支持写回策略的缓存一致性协议,该协议被应用 ...
- centos7之zabbix3.2搭建
环境介绍: centos7.4 zabbix3.2 一.zabbix介绍 zabbix官网:https://www.zabbix.com/ zabbix下载页面:https://www.zabbix. ...
- redis简介与持久化
一 . redis简介 redis属于NoSQL学名(not only sql) 特点: 存储结构与mysql这一种关系型数据库完全不同,nosql存储的是key value形式 nosql有很多产品 ...
- springcloud 新增微服务
个人记录 记录公司微服务项目,模块添加的步骤 一 创建Module 选择maven groupid和artifactid 参考 pom文件 <project xmlns="http: ...
- bzoj 3223: Tyvj 1729 文艺平衡树 (splay)
链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3223 题面: 3223: Tyvj 1729 文艺平衡树 Time Limit: 10 S ...
- Scrapy 框架,爬虫文件相关
Spiders 介绍 由一系列定义了一个网址或一组网址类如何被爬取的类组成 具体包括如何执行爬取任务并且如何从页面中提取结构化的数据. 简单来说就是帮助你爬取数据的地方 内部行为 #1.生成初始的Re ...
- 关于百度地图(离线)使用过程报“Cannot read property 'jb' of undefined ”错误的解决办法
使用百度地图(离线)API时,地图无法显示,f12查看报错: BaiduApi_2.0.js:1056 Uncaught TypeError: Cannot read property 'jb' of ...
- python的内置模块xml模块方法 xml解析 详解以及使用
一.XML介绍 xml是实现不同语言或程序直接进行数据交换的协议,跟json差不多,单json使用起来更简单,不过现在还有很多传统公司的接口主要还是xml xml跟html都属于是标签语言 我们主要学 ...