zoukankan      html  css  js  c++  java
  • CSS|Stacking context 堆叠上下文

    一、释义

    MDN对Stacking context的解释

    Stacking context refers to how elements on a webpage appear to sit on top of other elements, just as you can arrange index cards on your desk to lie side-by-side or overlap each other.

    翻译就是:堆叠上下文,指的是一个web页面中的元素如何放置于其他元素上,就像你在桌子上摆放卡牌,让它们互相重叠放置

    二、进一步了解

    2.1 理解 Stacking context

    Stacking context是一个单独的上下文,里面的元素按照某种规则可以进行堆叠。
    通俗的来说,Stacking context就是一个单独的空间,按照上面说的,上下文就是桌子,里面的元素就是卡牌,按照某种规则摆放在一起,我们从桌子正上方看见的景色,就是Stacking context所呈现的效果。

    2.2 某种规则是哪些?

    比较通用的元素之间的堆叠规则(图片出自张鑫旭):

    这里说下我们使用比较频繁的、最常见的堆叠规则 z-index:

    规则1:当一个 Stacking context 中的多个元素之间重叠的时候, z-index 较大的元素会覆盖较小的元素在上层进行显示,举个例子:有块元素为 a,子元素为 b。a 的子元素为 aa,即使 a 被 b 遮挡,只要 aa 的 z-index 比 b 的大,那么 aa 就会显示在 a 、b 之上,尽管 aa 是 a 的后代元素且 a 被 b 遮挡。

    规则2:当一个元素是一个已经定位的盒子(盒子即盒子模型,通常为块元素,这里的盒子的 position 值不为 static),且它的 z-index 值不为 auto ,那么该盒子内部会单独形成一个新的Stacking context,其内部的元素根据这个新的Stacking context进行堆叠

    三、应用场景

    • 主要应用在背景图片已经背景色的混合,有时候你会发现自己的背景图片和背景色混合在一起了(颜色相互影响了,比如多种颜色合体,变成了其他诡异的颜色),并不是你想要的效果,就得考虑Stacking contex的问题了

    四、相关链接

    关于Stacking contex的一些css属性:Compositing and Blending | MDN
    张鑫旭:深入理解CSS中的层叠上下文和层叠顺序

  • 相关阅读:
    Python 文件操作
    Python 操作 sqlite
    Python中的random模块
    Linux系统下的/etc/nsswitch.conf文件
    Python 列表/元组/字典总结
    快斗之翼:python2的print和python3的print()
    田小计划:图解Python深拷贝和浅拷贝
    Python 自省指南
    Python运算符优先级
    tc: 模拟网络异常的工具
  • 原文地址:https://www.cnblogs.com/panshaojun/p/14710567.html
Copyright © 2011-2022 走看看