CSS里的BFC和堆叠上下文,它们是怎么行事的

怎么着是 CSS 层叠上下文,它们是什么行事的?

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

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

CSS层叠上下文给广大开发者都推动过干扰。在我写完《CSS
Master》中的布局章节此前,我都不可以说自己早已完全知道了它们。当然了,我了然元素的
z-index 属性是内需 position 属性不为 static
时才能奏效的,但那也是在本人读了广大次Philip 沃尔顿 的《没有人报告您至于
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] 身份转换对元素没有视觉上的震慑,然则会接触一个新的层叠上下文。

打赏扶助自己翻译更加多好小说,谢谢!

打赏译者

CSS3 中的层叠上下文初探

2015/10/09 · CSS ·
层叠上下文

初稿出处: HaoyCn   

前言:关于层叠上下文,小编还没有去阅读更详实的 W3C
规范来打探更本质的规律(表打我,等自家校招得到 offer 了本人就读好伐
T_T)。一贯传闻 CSS3
里的层叠上下文有新情况,但没找到很好的参考资料,故自己实战一把。鉴于作者水平有限,如有任何疏漏或者不当,则请求读者斧正。

率先申明那篇文章是便民自己查概念时用的,完全不打听这多个概念的人应有会读不懂
:p

    一.层叠顺序

打赏扶助我翻译越多好小说,谢谢!

任选一种支付办法

澳门葡京 3
澳门葡京 4

1 赞 2 收藏
评论

1 CSS2.1 中确定的层叠上下文澳门葡京 5

Background and borders — of the element forming the stacking
context. The lowest level in the stack.

Negative Z-Index — the stacking contexts of descendants elements
with negative z-index.

Block Level Boxes — in-flow non-inline-level non-positioned
descendants.

CSS里的BFC和堆叠上下文,它们是怎么行事的。Floated Boxes — non-positioned floats

Inline Boxes — in-flow inline-level non-positioned descendants.

Z-index: 0 — positioned elements. These form new stacking
contexts.

Positive Z-index — positioned elements. The highest level in the
stack.

图文来源:http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892

当今该小编上场翻译了!在分解上边术语从前,须要表达四个术语:“定位”指的是 position 为 relative 、absolutefixed 的元素,“非定位”则相反。

  • 背景和边框:建立层叠上下文元素的背景和边框。层叠中的最低级
  • 负 Z-indexz-index 为负的儿孙元素建立的层叠上下文
  • 块级盒:文档流内非行内级非固定后代元素
  • 浮动盒:非固定变化元素(作者注:即排除了 position: relative 的浮动盒)
  • 行内盒:文档流内行内级非定点后代元素
  • Z-index:
    0
    :定位元素。那一个因素建立了新层叠上下文(作者注:不自然,详见后文)
  • 正 Z-index:(z-index 为正的)定位元素。层叠的参天等级

引文如上所表。但小编提示各位读者一些,“Z-index:
0”级的定位元素不必然就会确立新的层叠上下文。因为:

CSS2.1:(z-index: auto)The stack level of the generated box in the
current stacking context is 0. The box does not establish a new
stacking context unless it is the root element.

当定位元素 z-index: auto,生成盒在当下层叠上下文中的层级为
0。但该盒不创造新的层叠上下文,除非是根元素。

业内是那般,但 IE6-7 有个
BUG,定位元素就是 z-index: auto 照样创制层叠上下文。

如上是基于 CSS2.1 的层叠上下文介绍。上边要阐释的是在 CSS3
新环境下,层叠上下文的新转变。

故而将它俩总计在共同,是因为它们的特征相当相像:BFC和堆叠上下文都不是看得见摸得着的实例,而是一套抽象的规则。当您在css里写出部分事物时就会接触那套规则,然后根据BFC或堆叠上下文的条条框框来渲染页面。
换句话说,知道BFC和堆叠上下文时页面会发生哪些,然后知道什么去接触那两套规则,大家就足以接纳它们了。

所谓层叠顺序就是用户观察页面视角z轴上体现顺序

有关小编:EricHedgedog

澳门葡京 6

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

澳门葡京 7

2 CSS3 带来的变动

总的看变化可以归为两点,大家将来依次商量:

  1. CSS3 中诸多属性会创造局地层叠上下文
  2. tranform 属性改变相对定位子元素的带有块

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。

    二.层叠上下文

2.1 爆发新层叠上下文的情况

以下情状会时有暴发新的层叠上下文:

  • 根元素(HTML)
  • 纯属或相对固定且 z-index 值不为 auto
  • 一个伸缩项目 Flex Item,且 z-index 值不为 auto,即父元素 display: flex|inline-flex
  • 元素的 opacity 属性值小于 1
  • 元素的 transform 属性值不为 none
  • 元素的 mix-blend-mode 属性值不为 normal
  • 元素的 filter 属性值不为 normal
  • 元素的 isolation 属性值为 isolate
  • position: fixed
  • will-change 中指定了上述任意属性,尽管你没有平昔定义那一个属性
  • 元素的 -webkit-overflow-scrolling 属性值为 touch

上述列表译自:

,提示广大读者,别看粤语版,因为粤语版并非实时跟进更新的,且翻译不太可信

那就是说BFC的渲染规则是什么样吧?

  • 其中的Box会在笔直方向,一个接一个地停放。
  • Box垂直方向的相距由margin决定。属于同一个BFC的三个相邻Box的margin会爆发重叠
  • 各样元素的margin box的左手, 与分包块border
    box的左手相接触(对于从左往右的格式化,否则反而)。即使存在浮动也是那样。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔断的单身容器,容器里面的子元素不会影响到外边的要素。反之也如此。
  • 测算BFC的惊人时,浮动元素也出席统计

层叠上下文
html中的三维概念,这个HTML元素在一条假想的对立于面向(电脑显示屏)视窗或网页用户z轴上的延申,html元素依据自身的性质按优先顺序占用层叠上下文的空间.

2.2 提高层叠上下文中的层级

以上因素建立新层叠上下文的同时,也会提高元素自身所在层叠上下文中的层级。

我们以 opacity 为例。来看下 CSS3 规范中的话:

If an element with opacity less than 1 is not positioned,
implementations must paint the layer it creates, within its parent
stacking context, at the same stacking order that would be used if it
were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an
element with opacity less than 1 is positioned, the ‘z-index’ property
applies as described in [CSS21], except that ‘auto’ is treated as
‘0’ since a new stacking context is always created.

一旦元素 opacity 小于 1
且未稳定,则必须在其父层叠上下文中,按其在定点了的、z-index: 0 且 opacity: 1 的动静中的层叠顺序绘制。假使 opacity 小于
1 且已定位,z-index 属性按 CSS2.1
应用,但 auto 要视为 0,因为新的层叠上下文总是成立了的。

如下案例:

CSS

div { width: 100px; height: 100px; } #box1 { position: absolute;
background: red; top: 40px; left: 40px; } #box2 { background: blue; }
<body> <div id=”box1″></div> <div
id=”box2″></div> <body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
    width: 100px;
    height: 100px;
}
#box1 {
    position: absolute;
    background: red;
    top: 40px;
    left: 40px;
}
#box2 {
    background: blue;
}
 
<body>
    <div id="box1"></div>
    <div id="box2"></div>
<body>

以上 CSS 和 HTML 片段中,由于 box1 是纯属定位(层级为“Z-index:
0”级),而 box2 是文档流内块级盒(层级为“块级盒”级),因而 box1 会层叠在
box2 之上。下边添加如下 CSS 规则:

CSS

#box2 { opacity: .5; }

1
2
3
#box2 {
    opacity: .5;
}

那时候, box2 则会层叠在 box1 以上了。因为 box2 的 opacity 为
0.5(小于 1),故视其为“Z-index: 0”级,也就和 box1
同级了。同级处境下,依照双方在源代码中的顺序,居后的 box2
又重新占领高地了。

读者可以取上面规则之任意一条试行,都能达到平等出力:

CSS

#box2 { transform: scale(1); mix-blend-mode: difference; isolation:
isolate; -webkit-filter: blur(5px); }

1
2
3
4
5
6
#box2 {
    transform: scale(1);
    mix-blend-mode: difference;
    isolation: isolate;
    -webkit-filter: blur(5px);
}

哪些叫触发BFC?

根据上述,大家早就清楚了在一个页面中,只如果box-level的box都按照bfc规则,实际上根元素<html></html>就接触了bfc,页面上具备的因素都是其一bfc区域内的子元素而已。所谓的触发bfc,指的是让某一个box变成bfc的父元素,其中间的因素坚守bfc的规则,可是它的外表就和别的因素不相干了。

    三.项目案例

2.3 transform 改变相对定位子元素包括块

transform 除了建立新的局地层叠上下文外,还会干一件事:改变相对定位子元素的带有块。须留意的是,固定定位也是纯属定位的一种。

怎么是带有块?有时候有些盒子根据矩形盒总括自己定位和大小,此矩形盒即包罗块。越多详情请阅读视觉格式化模型详述。

原则性定位元素

固定定位元素的带有块由视口创制(如若读者驾驭视觉格式化模型详述的音信,也就清楚那一点:在测算其“静态地点”的时候,则以伊始化包罗块作为其统计包含块)。现在我们看以下源代码:

CSS

div { width: 100px; height: 100px; } #fixed { position: fixed; width:
100%; height: 100%; top: 0; left: 0; background: blue; } #transform {
background: red; padding: 20px; } <body> <div
id=”transform”> <div id=”fixed”></div> </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
    width: 100px;
    height: 100px;
}
#fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    padding: 20px;
}
 
<body>
    <div id="transform">
        <div id="fixed"></div>
    </div>
</body>

这些时候,以视口为带有块进行固化和分寸计算, fixed 将会铺满所有显示屏。

但现在,大家抬高如下规则:

CSS

#transform { transform: scale(1); }

1
2
3
#transform {
    transform: scale(1);
}

此刻,fixed 的盈盈块不再是视口,而是 transform
的内边距盒的边缘盒了。故此时 fixed 的宽高均为 140px。

相对定位元素

俺们举一个例子:

CSS

#relative { position: relative; width: 100px; height: 100px;
background: green; } #absolute { position: absolute; width: 100%;
height: 100%; top: 0; left: 0; background: blue; } #transform {
background: red; width: 50px; height: 50px; } <div id=”relative”>
<div id=”transform”> <div id=”absolute”></div>
</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#relative {
    position: relative;
    width: 100px;
    height: 100px;
    background: green;
}
#absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    width: 50px;
    height: 50px;
}
 
<div id="relative">
    <div id="transform">
        <div id="absolute"></div>
    </div>
</div>

那时候 absolute 的包蕴块为 relative 的内边距盒的边缘盒。因而 absolute
的宽高均为 100px。然后大家添加如下规则:

CSS

#transform { transform: scale(1); }

1
2
3
#transform {
    transform: scale(1);
}

是因为 transform 成立了一部分层叠上下文,absolute 的包罗块不再是 relative
而是 transform 了,根据这一新的带有块,得新宽和高为 50px。

1 赞 1 收藏
评论

澳门葡京 8

如何因素会触发BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

关于BFC的机能,可以去掉浮动,阻止外边距合并,布局。当然不到万抓耳挠腮不要那样做。

3.1
正常文档流之float浮动与inline-block内联块级元素层叠顺序的相比

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属性将会受到影响。

澳门葡京 9澳门葡京 10

现实什么触发堆叠上下文呢?

  • 根元素 (HTML),
  • z-index 值不为 “auto”的 相对/相对固定
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素
    display: flex|inline-flex,
  • opacity 属性值小于 1 的因素(参考 the specification for opacity),
  • transform 属性值不为 “none”的元素,
  • mix-blend-mode 属性值不为 “normal”的要素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation 属性被装置为 “isolate”的要素,
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性,纵然你未曾直接指定那个属性的值
  • -webkit-overflow-scrolling 属性被装置 “touch”的要素
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>层叠顺序与层叠上下文</title>
 6         <style>
 7             body, div {
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .container {
12                 position: relative;
13                 background: #ddd;
14                 margin-bottom: 10px;
15             }
16             .container > div {
17                 width: 250px;
18                 height: 250px;
19                 line-height: 250px;
20                 font-family: "微软雅黑";
21                 color: #333;
22                 text-align: center;
23                 font-size: 18px;
24                 font-weight: bold;
25                 border: 1px dashed #e6e6e6;
26                 /*opacity: .9;添加opacity触发-层叠上下文后添加的div带有display:inline-block属性的元素的div会叠加先添加div之上*/
27             }
28             .float {
29                 float: left;
30                 background-color: deeppink;
31             }
32             .inline-block {
33                 display: inline-block;
34                 background-color:yellowgreen;
35                 margin-left: -100px;
36             }
37         </style>
38     </head>
39     <body>
40         <div class="container">
41             <div class="inline-block">#divA display:inline-block</div>
42             <div class="float">#divB float:left</div>
43         </div>
44         <div class="container">
45             <div class="float">#divB float:left</div>
46             <div class="inline-block">#divA display:inline-block</div>
47         </div>
48     </body>
49 </html>

堆叠上下文的意义以及对z-index暴发的熏陶

怎么样是堆叠上下文呢?根据mdn的文档:

层叠上下文是HTML元素的三维概念,那几个HTML元素在一条假想的相对于面向(电脑显示屏的)视窗或者网页的用户的z轴上延伸,HTML元素根据其本人性质依照事先级依次占用层叠上下文的空间。

实际上堆叠上下文和BFC是一模一样的,BFC可以当做是block-level
box的一个原始属性
;而堆叠上下文可以当作任何因素的一个非正规性质。
给一个因素设置上文中的擅自一个css属性,就会使此因素触发堆叠上下文。
对z-index的熏陶就是:在堆叠上下文中,其子元素的 z-index
值只在父级堆叠上下文中有意义。子级堆叠上下文被机关视为父级堆叠上下文的一个独立单元。每个堆叠上下文完全独立于它的哥们元素:当处理层叠时只考虑子元素。

澳门葡京 11

实例图

Note: 层叠上下文的层级是 HTML
元素层级的一个层级,因为唯有某些因素才会创立层叠上下文。可以如此说,没有创设自己的层叠上下文的因素
将被父层叠上下文包蕴。

View Code

澳门葡京 12

表明 在并未添加opacity属性值小于1的因素的时候,无论怎么div.inline-block/div.float顺序怎么排列,div.inline-block元素总叠加的div.float之上

归纳 (正常流中inline-block内联块级元素级别比float浮动盒子z-index级别高)

3.2
正常文档流之block块级元素与inline-block内联块级元素层叠顺序的相比

澳门葡京 13澳门葡京 14

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>block块级元素与inline-block内联块级元素层叠顺序的比较</title>
 6         <style>
 7             .container > div {
 8                 width: 200px;
 9                 height: 200px;
10                 text-align: center;
11                 line-height: 200px;
12                 color: #FFF;
13                 font-weight: bold;
14                 font-family: "微软雅黑";
15                 font-size: 20px;
16             }
17             .container > div.box1 {
18                 display: inline-block;
19                 background-color: orangered;
20             }
21             .container > div.box2 {
22                 display: block;
23                 background-color: #00AABB;
24                 margin-top: -200px;
25                 color: #900251;
26             }
27         </style>
28     </head>
29     <body>
30         <div class="container">
31             <div class="box1">box_1:inline-block</div>
32             <div class="box2">box_2:block</div>
33         </div>
34     </body>
35 </html>

View Code

澳门葡京 15澳门葡京 16

 归结 (正常流中inline-block内联块级元素比block块探花素的层级高,同样文字比背景图层的层级高)

上述例子都可以用下图很好的诠释

澳门葡京 17澳门葡京 18

上图层叠顺序解释

  1. 多变堆叠上下文环境的要素的背景与边框

  2. 拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)

  3. 正常流式布局,非 inline-block,无 position 定位(static除外)的子元素

  4. 无 position 定位(static除外)的 float 浮动元素

  5. 正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包罗display:table 和 display:inline )

  6. 拥有 z-index:0 的子堆叠上下文元素

  7. 拥有正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)

当添加添加opacity属性值小于1的元素后opacity:0.9让三个div都生成stacking context (层叠上下文),
div.inline-block元素总叠加的div.float之上情形就会打破,

触发-层叠上下文后添加的div带有display:inline-block属性的元素的div会叠加先添加div之上

三.触发层叠上下文,多样境况

  • 根元素 (HTML),
  • 澳门葡京 ,z-index 值不为 “auto”的 相对/相对稳定,
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素
    display: flex|inline-flex,
  • opacity 属性值小于 1 的要素(参考 the specification for opacity),
  • transform 属性值不为 “none”的因素,
  • mix-blend-mode 属性值不为 “normal”的元素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation 属性被装置为 “isolate”的元素,
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性,即便你从未一直指定这么些属性的值
  • -webkit-overflow-scrolling 属性被设置 “touch”的元素

澳门葡京 19澳门葡京 20

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>触发层叠上下文</title>
 6         <style>
 7             body, div, img {
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .box {
12                 background-color: #00AABB;
13                 width: 30%;
14                 /*transform: rotate(4deg);*/
15                 /*opacity: .8;*/
16                 display: inline-flex;  /*触发层叠上下文*/
17             }
18             .inner-box {
19                 position: relative;
20                 z-index: 1;/*该z-index只在父级上下文中有意义*/
21             }
22             .box > .inner-box > img {
23                 position: relative;
24                 z-index: -1; /*子元素的z-index正负无效*/
25             }
26         </style>
27     </head>
28     <body>
29         <div class="box">
30             <div class="inner-box">
31                 <img src="img/HBuilder.png" />
32             </div>
33         </div>
34     </body>
35 </html>

View Code

子元素的div.inner-box 值只在父级div.box添加触发堆叠上下文的二种情状(如添加transform: rotate(4deg);或opacity:
.8;或display: inline-flex; 等触发层叠上下文)

下才有效,而div.box子元素img中的z-index已无济于事,那里优先相比较父级

使用position:
relative爆发层叠上下文

澳门葡京 21澳门葡京 22

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>层叠上下文</title>
 6         <style>
 7             .item1 {
 8                 background-color: #00AABB;
 9                 color: #FFF;
10                 text-align: center;
11                 font-family: "微软雅黑";
12                 width: 100px;
13                 height: 100px;
14                 line-height: 100px;
15             }
16             /*div.box产生层叠上下文,但并不影响父元素item1*/
17             /*父元素item1item1依然被div.item2元素层叠*/
18             /*div.box产生层叠上下文的元素总是比其他元素高*/
19             .item1 > .box {
20                 height: 100px;
21                 position: relative;
22                 background-color: darkblue;
23             }
24             .item2 {
25                 background-color: deeppink;
26                 width: 100px;
27                 height: 100px;
28                 margin-top: -50px;
29             }
30         </style>
31     </head>
32     <body>
33         <div class="item1">
34             <div class="box">box</div>
35         </div>
36         <div class="item2"></div>
37     </body>
38 </html>

View Code

澳门葡京 23

【资料参考】

一篇通俗易懂的 CSS
层叠顺序与上下文

相关文章

发表评论

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

*
*
Website