菜单

CSS里的BFC和堆叠上下文,层叠上下文

2019年11月3日 - 银河官方网站
CSS里的BFC和堆叠上下文,层叠上下文

什么是 CSS 层叠上下文,它们是如何工作的?

2016/02/24 · CSS ·
层叠上下文

本文由 伯乐在线 –
EricHedgedog
翻译,JustinWu
校稿。未经许可,禁止转载!
英文出处:Tiffany B.
Brown。欢迎加入翻译组。

CSS层叠上下文给很多开发者都带来过困扰。在我写完《CSS
Master》中的布局章节之前,我都不能说自己已经完全理解了它们。当然了,我理解元素的
z-index 属性是需要 position 属性不为 static
时才能生效的,但这也是在我读了无数次Philip Walton 的《没有人告诉你关于
Z-Index 的一些事》之后才理解了。

没有冒犯 Philip 的意思。就像我说过的:层叠上下文很棘手。

那什么是层叠上下文呢?层叠上下文就是一个包含了一组堆叠层的元素。这可以是一个
html
元素创建的根层叠上下文,或者是一个由特定属性和值创建的局部层叠上下文。

“包含一堆层”是一个很奇怪的短语,但这是一个简单的概念。在一个局部层叠上下文中,子元素的z-index
会根据其父元素来设置而不是文档的根元素。在该上下文以外的层(例如:一个局域层叠上下文的相邻同级元素)不能位于其内部层之间。

这儿是一个例子。使用切换按钮来为 A 元素触发或者取消一个局域层叠上下文。

图片 1

图片 2

在这个例子中,#a p 元素(A的子元素) 的z-index为1 ,#a 元素和 #b
元素的z-index值为auto 。因为 #a p 元素的 z-index
属性值为正数,所以在根层叠上下文内该元素位于 #a 元素和 #b 元素之上。

然而把 #a 元素的 transform 属性值由 none 改为 scale(1)
会触发一个局域层叠上下文。现在 #a p 元素的 z-index 值会根据 #a
元素来计算而不是文档的根元素。

无论是根层叠上下文还是局域层叠上下文都会遵循一系列的规则来确定元素的堆叠和绘制顺序,一个层叠上下文的子元素会按照从下到上的顺序绘制。

  1. 堆叠层级为负数的元素,通常为 z-index:-1 的元素 。
  2. position 属性值为 static 的元素。
  3. 堆叠层级为 0 的元素,通常为 z-index:auto 的元素。
  4. 堆叠层级为正数的元素,例如 z-index 属性值为 1 或者更大的元素。

如果两个元素有相同的堆叠层级,就按照它们在源文件中出现的顺序层叠。后继元素堆叠在前驱元素之上。

少数的 CSS 属性和值会触发一个新的层叠上下文。它们包含: opacity
属性,当它的属性值小于 1 时(例如:.99);
filter 属性,当它的属性值不为 none 时;CSS 混合模式属性 mix-blend-mode,
当它的属性值不为 normal 时。

和你猜想的一样,transform
属性能够触发一个层叠上下文,但是仅当它的属性值不为 none
时。这包含了身份转换[1] ,例如属性值为 scale(1) 和 translate3d(0,0,0)

在上述例子中,#a 元素和 #b 元素拥有相同的堆叠层级,但是 #b
元素是源文件中的第二个元素。当 transform: scale(1) 被应用时, #a p
变为包含在 #a 元素的局部上下文中。结果是,#b
元素上升到了堆栈的最上面。

[1] 身份转换对元素没有视觉上的影响,但是会触发一个新的层叠上下文。

打赏支持我翻译更多好文章,谢谢!

打赏译者

首先声明这篇文章是方便自己查概念时用的,完全不了解这两个概念的人应该会读不懂
:p

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 3
图片 4

1 赞 2 收藏
评论

之所以将它俩总结在一起,是因为它们的特征非常相似:BFC和堆叠上下文都不是看得见摸得着的实例,而是一套抽象的规则。当你在css里写出一些东西时就会触发这套规则,然后根据BFC或堆叠上下文的规则来渲染页面。
换句话说,知道BFC和堆叠上下文时页面会发生什么,然后知道怎样去触发这两套规则,我们就可以利用它们了。

关于作者:EricHedgedog

图片 5

前端攻城狮
个人主页 ·
我的文章 ·
17 ·
 

图片 6

1.BFC

BFC(Block formatting
context)直译为”块级格式化上下文”,它是一个独立的渲染区域,在此区域内有一套渲染规则,只有Block-level
box参与, 它规定了内部的Block-level
Box如何布局,并且与这个区域外部毫不相干
。所以说block-level
的box本身就遵循BFC规则。display为block/item-list/table
的元素就是Block-level
box。inline,inline-block,inline-table这些都是inline-level box。

那么BFC的渲染规则是什么呢?

什么叫触发BFC?

根据上述,我们已经知道了在一个页面中,只要是box-level的box都遵循bfc规则,实际上根元素<html></html>就触发了bfc,页面上所有的元素都是这个bfc区域内的子元素而已。所谓的触发bfc,指的是让某一个box变成bfc的父元素,其内部的元素遵循bfc的规则,不过它的外部就和其他元素不相干了。

哪些元素会触发BFC?

至于BFC的作用,可以清除浮动,阻止外边距合并,布局。当然不到万不得已不要这么做。

2.堆叠上下文

方老师灵魂画图揭示了堆叠顺序的概念:

  1. background
  2. border
  3. 块级
  4. 浮动
  5. 内联
  6. z-index: 0
  7. z-index: +
    如果是兄弟元素重叠,那么后面的盖在前面的身上。
![](https://upload-images.jianshu.io/upload_images/8115593-e7913e7110801a9c.jpg)

堆叠顺序



z-index:0的元素一定z-index:-1的上面吗?不一定。如果元素触发了堆叠上下文,其z-index属性将会受到影响。

具体如何触发堆叠上下文呢?

堆叠上下文的含义以及对z-index产生的影响

什么是堆叠上下文呢?按照mdn的文档:

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

其实堆叠上下文和BFC是一模一样的,BFC可以看作是block-level
box的一个固有属性
;而堆叠上下文可以看作任何元素的一个特殊属性。
给一个元素设置上文中的任意一个css属性,就会使此元素触发堆叠上下文。
对z-index的影响就是:在堆叠上下文中,其子元素的 z-index
值只在父级堆叠上下文中有意义。子级堆叠上下文被自动视为父级堆叠上下文的一个独立单元。每个堆叠上下文完全独立于它的兄弟元素:当处理层叠时只考虑子元素。

图片 7

实例图

Note: 层叠上下文的层级是 HTML
元素层级的一个层级,因为只有某些元素才会创建层叠上下文。可以这样说,没有创建自己的层叠上下文的元素
将被父层叠上下文包含。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图