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

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. LeetCode：21_Merge Two Sorted Lists | 合并两个排序列表 | Easy

    题目:Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list sh ...

  2. Windows10开发手记-RelativePanel使用详解

    Windows 10已于7月29号面向全球发布,同时Universal Windows Platform(UWP) SDK也已正式放出,配合VS 2015我们可以开发出通用的Windows App. ...

  3. C# TableLayoutPanel使用方法

    一.利用TableLayoutPanel类展示表格,以10行5列为例 第1步:在前台创建一个panel,使TableLayoutPanel对象填充其内部. 第2步:创建TableLayoutPanel ...

  4. 修改centos 7 系统时间

    查看当前系统时间 date 修改当前系统时间 date -s "2018-2-22 19:10:30 查看硬件时间 hwclock --show 修改硬件时间 hwclock --set - ...

  5. Android_学习系列(33)--App应用之提交到各大市场渠道

    本文同步更新在http://hmu140482.chinaw3.com/?p=315.    Android的终端碎片化问题,是一个很讨厌的问题.    而对于国内开发者来说,Android的市场“碎 ...

  6. Jfinal文件上传基础路径问题，windows下会以项目根路径为基础路径

    在本地windows下开发测试文件上传 使用com.jfinal.cos进行multipart/form-data请求数据格式的文件上传解析 import com.jfinal.upload.Uplo ...

  7. PostgreSQL 数据类型

    数值类型 数值类型由两个字节,4字节和8字节的整数,4字节和8字节的浮点数和可选精度的小数.下表列出了可用的类型. www.yiibai.com Name Storage Size Descripti ...

  8. (转)Sphinx中文分词安装配置及API调用

    这几天项目中需要重新做一个关于商品的全文搜索功能,于是想到了用Sphinx,因为需要中文分词,所以选择了Sphinx for chinese,当然你也可以选择coreseek,建议这两个中选择一个,暂 ...

  9. Vue2.5开发去哪儿网App 详情页面开发

    一,banner 图的设计 1. 新建detail的路由 import Detail from '@/pages/detail/Detail' ...... { path: '/detail', na ...

  10. C# 元数据描述

    元数据概述:元数据是一种二进制信息,用以对存储在公共语言运行库可移植可执行文件 (PE) 文件或存储在内存中的程序进行描述.将您的代码编译为 PE 文件时,便会将元数据插入到该文件的一部分中,而将代码 ...