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

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. Spring Boot核心配置

    启动类 在包根目录下添加启动类,必须包含main方法,再添加Spring Boot启动方法: SpringApplication.run(SampleController.class, args); ...

  2. 分布式协调服务ZooKeeper的典型应用

    Zookeeper典型应用 参考官方文档: http://zookeeper.apache.org/doc/current/recipes.html Out of the Box Applicatio ...

  3. [每天解决一问题系列 - 0013] 如何修改WiX Burn内置的窗口

    问题描述: 我们产品的burn安装包仅支持.net 3.5 sp1以上,在只有.net 2.0的机器上会给用户弹一个窗口,告诉用户为什么不能够安装的原因.本来burn已经内置了,但是在日文操作系统下, ...

  4. PID file /run/zabbix/zabbix_server.pid not readable (yet?) after start. 报错解决

    报错如下: [root@localhost zabbix]# systemctl start zabbix-server Job for zabbix-server.service failed be ...

  5. 211. Orchard学习 二 2、ManualResetEvent 与 AutoResetEvent

    一.Orchard里异步请求处理线程队列的控制 Orchard的Orchard.WarmupStarter模块,为HttpApplication.BeginRequest时间附加了一个异步处理事件:B ...

  6. 使用Project进行项目管理

    下面开始介绍Project的使用. 1.  从下列地址获取Project 2010的副本. 版权问题,已删除地址. 2.安装 2.1 版权页 2.2 自定义安装页 2.3 安装完毕. 3.使用该软件进 ...

  7. 树莓派安装vnc server并设置自启动

    在SSH终端输入sudo raspi-config, 这里需要打开几个选项: expand_rootfs – 将根分区扩展到整张SD卡; change_pass – 默认的用户名是pi,密码是rasp ...

  8. Mysql 用户权限管理

    1. MySQL 权限介绍 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表,我当前的版本mysql 5.7.22 . mysql权限表 ...

  9. EOS行为核心：解析插件chain_plugin

    EOS提供了大量的rpc接口,其中功能性最强,使用最频繁的一部分接口是EOS的行为核心,由chain_api_plugin提供,具体实现是在chain_plugin. 关键字:EOS,区块链,chai ...

  10. PHP多个进程同时写入同一个文件

    flock (PHP 3 >= 3.0.7, PHP 4, PHP 5) flock -- 轻便的咨询文件锁定 说明 bool flock ( int handle, int operation ...