文档中的层叠上下文由满足以下任意一个条件的元素形成：

1. z-index 值不为 "auto"的 绝对/相对定位.

2. position位fixed.

3. opacity 属性值小于 1.

4. transform 属性值不为 "none".

5. 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex.

6. html元素

7. filter值不为“none”的元素

The stacking context的更多相关文章

  1. CSS——关于z-index及层叠上下文（stacking context）

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  2. 关于stacking context和CSS z-index的总结

    HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了.但是,往往在项目中发现有些情况和我们的预期不太一致.经过研究和学习,总算搞清楚了其中的关系.简单总结如下: 只有Positione ...

  3. 层叠上下文(The stacking context)

    MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...

  4. 层叠上下文 Stacking Context

    层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...

  5. CSS - 层叠上下文（The stacking context）

    对 MDN 的上的例子的拓展 Root - DIV #1(z-index: 5) - DIV #2(z-index: 2) - DIV #3(z-index: 4) - DIV #4(z-index: ...

  6. CSS:Stacking Context

    通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠.在这种情况下,只有一个渲染进程,所有元素都知道其他元素所占用的空间.z-index属性可让你在渲染内容时调整 ...

  7. 层叠水平（stacking level)

    运用上图的逻辑,上面的题目就迎刃而解,inline-blcok 的 stacking level 比之 float 要高,所以无论 DOM 的先后顺序都堆叠在上面. 不过上面图示的说法有一些不准确,按 ...

  8. 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

随机推荐

  1. 初识The ONE

    Author:bakari  Date:2014.1.14 转载请注出处:http://www.cnblogs.com/bakari/p/3519841.html,谢谢! 本学期开始做真正意义上的研究 ...

  2. JavaScript中的关于this

    this在js中是一个特别的关键字,被自动保存在所有函数的作用域中. 为什么要用this this提供一个对象方式隐式传递一个对象的引用,因此可以将api设计的简洁并且容易复用.看下面两段代码的比较: ...

  3. Excel透视技巧-三级分类统计名单、分类统计数据

    Excel透视技巧-三级分类统计名单.分类统计数据 基础数据 透视表1--三级分类统计名单 透视表2-分类统计数据

  4. odoo开发笔记 -- 翻译机制及导入.po文件

    待补充 http://ju.outofmemory.cn/entry/181972

  5. Ubuntu 16.04 截图快捷键

    一.查看 "截图" 快捷键 打开 "系统设置",点击 "硬件" 下的 "键盘",然后点击 "快捷键" ...

  6. mysql表分区实战

    一,什么是数据库分区以mysql为例,mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面 (可以通过my.cnf中的datadir来查看),一张表主要对应着三个文件 ...

  7. vue-04-组件

    1, 介绍 vue最强大的功能, 可以扩展html元素, 封装可充用的代码 在较高的层面, 组件是自定义元素, vue的编译器为他添加特殊功能, 在有些情况下, 组件也可以表现为用 ls 特性进行扩展 ...

  8. mysql格式化时间戳为日期

    MySQL中有一个像PHP的date函数一样的日期格式化函数DATE_FORMAT,使用这个函数时,需要像下面例子这样传递一个格式字符串和时间戳 SELECT DATE_FORMAT(NOW(),&q ...

  9. 图像处理中kmeans聚类算法C++实现

    Kmeans聚类算法是十分常用的聚类算法,给定聚类的数目N,Kmeans会自动在样本数据中寻找N个质心,从而将样本数据分为N个类别.下面简要介绍Kmeans聚类原理,并附上自己写的Kmeans聚类算法 ...

  10. SQL Server中锁与事务隔离级别

    SQL Server中的锁分为两类: 共享锁 排它锁 锁的兼容性:事务间锁的相互影响称为锁的兼容性. 锁模式 是否可以持有排它锁 是否可以持有共享锁 已持有排它锁 否 否 已持有共享锁 否 是 SQL ...