the stacking context(精简)

以下情况会生成stacking context:

  1. html中的根元素
  2. position属性值为"absolute"或者"relative"并且z-index属性值不是"auto"的元素
  3. position属性值为"fixed"或者"sticky" (sticky是设置手机浏览器的) 的元素
  4. 父元素是flex布局并且z-index的值不是"auto"的元素
  5. opacity (透明度) 小于1的元素
  6. "mix-blend-mode"属性值不是"normal"的元素
  7. 有以下任何一个属性并且属性值不是"none"的元素:
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
  1. 属性isolation值为"isolate"的元素
  2. "-webkit-overflow-scrolling"值为"touch"的元素
  3. element with a will-change value specifying any property that would create a stacking context on non-initial value

在stacking contexts中, 子元素按照同样的规则进行stack. 值得注意的是, z-index值只在该元素的父元素中有意义. 子级stacking context会被自动地按照一个父级stacking context的独立单元对待.

stacking context的层级是html元素层级的一个子集, 因为只有一些元素会创建stacking context. 我们说不会创建自己stacking context的元素会父级stacking context包含.

翻译自 The stacking context
参考 层叠上下文

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1赞 92
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,477评论 19赞 139
  • CSS堆叠上下文（The stacking context）
    1. 堆叠顺序 堆叠顺序（stacking order）：HTML 内元素发生层叠的时候的特定垂直顺序,即元素在用...
    饥人谷_风争阅读 8,658评论 0赞 9
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 11,772评论 0赞 17
  • 第二天
    小景是个拧巴的人，至少她自己是这么认为，感觉每天有一堆人生问题需要思考，有一堆梦想想去实现 ，但是又是一个想着但是的人。
    在美景中发呆阅读 1,163评论 0赞 0