原版的书文出处

2 CSS3 带来的浮动

因此看来变化可以归为两点,我们随后相继商量:

  1. CSS3 中比很多属性会创立局地层叠上下文
  2. tranform 属性改变相对定位子成分的带有块

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。

纯属定位元素

www.yabovip4.com,我们举贰个事例:

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>

亚搏app官方网站,那时 absolute 的包括块为 relative 的内边距盒的边缘盒。因而 absolute
的宽高均为 100px。然后大家抬高如下准绳:

CSS

#transform { transform: scale(1); }

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

鉴于 transform 成立了有的层叠上下文,absolute 的盈盈块不再是 relative
而是 transform 了,依照那意气风发新的包括块,得新宽和高为 50px。

1 赞 1 收藏
评论

亚搏app官方网站 1

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

以上列表译自:

,提醒广大读者,别看中文版,因为普通话版并非实时跟进更新的,且翻译不太正确

原版的书文出处。1 CSS2.1 中鲜明的层叠上下文亚搏app官方网站 2

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 的浮动盒)
  • 行内盒:文档流内行内级非定点后代成分
  • 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
新条件下,层叠上下文的新变化。

CSS3 中的层叠上下文初探

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

最早的小讲出处: HaoyCn   

前言:关于层叠上下文,小编还尚未去阅读更详细的 W3C
标准来打探更本质的法规(表打小编,等自家校招获得 offer 了自己就读好伐
T_T)。一贯据说 CSS3
里的层叠上下文有新情景,但没找到很好的参谋资料,故本人实战一把。鉴于小编水平有限,如有任何疏漏也许失实,则号召读者斧正。

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);
}

发表评论

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