原文出处

CSS3 中的层叠上下文初探

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

最早的小说出处: HaoyCn   

澳门太陽城集团登录网址,序言:关于层叠上下文,作者还平昔不去阅读更详细的 W3C
规范来打探更本质的原理(表打笔者,等自家校招得到 offer 了自己就读好伐
T_澳门太阳集团城网址,T卡塔尔国。一直听大人讲 CSS3
里的层叠上下文有新境况,但没找到很好的参考资料,故本人实战风姿浪漫把。鉴于作者水平有限,如有任何疏漏大概失实,则央浼读者斧正。

1 CSS2.1 中分明的层叠上下文澳门太陽城集团登录网址 1

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-indexz-index 为负的子孙成分建立的层叠上下文
  • 块级盒:文书档案流内非洲开发银行内级非定点后代成分
  • 浮动盒:非定点变化成分(小编注:即消除了 position: relative 的浮动盒卡塔 尔(英语:State of Qatar)
  • 行内盒:文书档案流内行内级非定点后代成分
  • 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
新景况下,层叠上下文的新转变。

2 CSS3 带给的扭转

总的来说变化能够归为两点,大家之后相继研究:

  1. CSS3 中过多属性会创造局部层叠上下文
  2. tranform 属性退换相对定位子成分的盈盈块

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

如上列表译自:

,提醒广大读者,别看中文版,因为汉语版实际不是实时跟进更新的,且翻译不太规范

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卡塔 尔(英语:State of Qatar),故视其为“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);
}

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 收藏
评论

澳门太陽城集团登录网址 2

You may also like...

发表评论

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

网站地图xml地图