层叠顺序与层叠上下文,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] 身份转换对元素没有视觉上的熏陶,不过会触发一个新的层叠上下文。

打赏匡助自己翻译越来越多好作品,谢谢!

打赏译者

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.

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-index层叠顺序与层叠上下文,CSS里的BFC和堆叠上下文。:z-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
层叠顺序与上下文

网站地图xml地图