index堆叠规则,中的层叠上下文初探

层叠上下文 Stacking Context

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

初稿出处:
elcarim的博客   

在CSS2.1规范中,每种盒模型的职位是三维的,分别是平面画布上的x轴,y轴以及代表层叠的z轴。对于每种html元素,都可以透过安装z-index性能来安装该因素在视觉渲染模型中的层叠顺序。

z-index可以设置成几个值:

  • auto,默许值。当设置为auto的时候,当前成分的层叠级数是0,同时那些盒不会创立新的层级上下文(除非是根成分,即<html>);
  • <integer>。提示层叠级数,可以使负值,同时无论是如何值,都会创立一个新的层叠上下文;
  • inherit

而外由根根成分创造的根层叠上下文以外,此外上下文是由z-index不为auto的“positioned”成分所创办。

参考层叠级数,浏览器会基于以下规则来渲染绘制每种在同一个层叠上下文中的盒模型:
(从先绘制到后绘制)

  1. 成立层叠上下文的要素的背景和边际;
  2. z-index为负值的子成分,数值越小越早被绘制;
  3. 还要满意“in-flow”、“non-inline-level”、“non-positioned”的后代成分;
  4. “non-positioned”的成形成分
  5. 满足“in-flow”、“inline-level”、“non-positioned”的遗族成分;
  6. 层叠级数为0的子层叠上下文以及“positioned”且层叠级数为0的后代成分;
  7. 层叠级数大于等于1的“positioned”子层叠上下文,数值越小越早被绘制;

在规则中,提到了三种成分的修饰词,下边是简约的分解:

  • “positioned”指的是positionfixedabsoluterelative;那么只要未安装或为static的就是“non-positioned”元素;
  • “out-of-flow”要素指的更动的或绝对定位(fixedabsolute)的成分,又恐怕是根成分;借使不是上述情状,那些这么些成分就是“in-flow”
  • “inline-level”要素指的是displayinlineinline-tableinline-block的元素;

平整有点多,但概括说,就是父成分会先绘制,接着是z-index为负值的子成分,然后是“non-positioned”成分,最后是依据层叠级数从0起首逐级绘制(那样说相比较不难,省略了汪洋细节,因而并不是很标准)。要是层级相同,则依据元素在DOM树中的顺序来开展绘图。

从那样看,要让z-index非负的因素依照层级控制生效,那么就将该因素设置为“positioned”,这也是多多益善稿子中常见提到的条条框框。

上边,将采用MDN中的例子来分析和释疑层叠上下文中的规则和计量方式,部分代码应用的MDN上的源码,别的一些是透过细微改动,目的是为着更好得把难题讲述得更清楚。

index堆叠规则,中的层叠上下文初探。z-index堆叠规则,z-index堆叠

CSS3 中的层叠上下文初探

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

原文出处: HaoyCn   

前言:关于层叠上下文,小编还尚无去阅读更详尽的 W3C
规范来通晓更本质的原理(表打我,等自个儿校招得到 offer 了自我就读好伐
T_T)。一贯传闻 CSS3
里的层叠上下文有新景况,但没找到很好的参考资料,故自身实战一把。鉴于作者水平有限,如有任何疏漏只怕失实,则请求读者斧正。

不足为别人道的 z-index 却能牵扯出那般大的文化

2016/04/30 · CSS ·
z-index

初稿出处: 凉风吹雪   

z-index在一般开支中到底一个比较常用的体制,一般了解就是设置标签在z轴先后顺序,z-index值大的突显在最前边,小的则会被挡住,是的,z-index的莫过于效果就是如此。

而是你确实精晓z-index吗?你通晓它有怎么着特点吗?那里先抛出多少个名词:“层叠顺序(stacking
order)
”,“层叠上下文(stacking
context)
”,“层叠水平(stacking
level)
”。

先说一下z-index的主旨用法:

z-index可以设置成五个值:

  • auto,默许值。当设置为auto的时候,当前成分的层叠级数是0,同时这些盒不会创建新的层级上下文(除非是根元素,即<html>);
  • <integer>。提醒层叠级数,可以使负值,同时无论是怎么样值,都会创制一个新的层叠上下文;
  • inherit。父成分继承

z-index只在定点成分中起效果,举栗子:

XHTML

<style> #box1{ background: blue; width: 200px; height: 200px; }
#box2{ background: yellow; width: 200px; height: 200px;
margin-top:-100px; } </style> <div id=”box1″></div>
<div id=”box2″></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
      
</style>
<div id="box1"></div>
<div id="box2"></div>

大家愿意box1要显得在box2上边,只怕那时候有同学会说,给box1加一个z-index大于0的值就可以了,那样是反常的,如图:

美高梅开户网址 1

box2遮挡了box1,固然box1设置z-index值再大也枉然,前面说了z-index只在固定成分(position=static除外,因为成分默认就是static,相当于没用position样式)中成效,也是就z-index要同盟position一起使用感兴趣的能够亲自证实一下,这里只投砾引珠。

层叠顺序对相对成分的Z轴顺序

层叠顺序其实不是z-index独有的,每一种成分都有层叠顺序,成分渲染的先后顺序跟它有很大关系,不问可知当成分暴发层叠时,成分的层级高的会先行突显在上面,层级一样的则会依照dom的先后顺序举办渲染,前边的会覆盖后面的。文字再多只怕也未尝一张图来的直接,下边那张图是“七阶层叠水平”(网上盗的,很经典的一张图)

美高梅开户网址 2

再举个栗子,那里照旧拿刚才相当栗子来说,在并非z-index的前提下,利用css层叠顺序化解遮挡难题,代码修改如下

CSS

<style> #box1{ background: blue; width: 200px; height: 200px;
display:inline-block; } #box2{ background: yellow; width: 200px;
height: 200px; margin-top:-100px; } </style> <div
id=”box1″></div> <div id=”box2″></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
        display:inline-block;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
      
</style>
<div id="box1"></div>
<div id="box2"></div>

此地只做了细微的修改,就是给box1加了一个display:inline-block;的体制,那里解释一下,首先box1和box2暴发了层叠,然后box默许为块级成分,即display:block,从七阶图中看出,display:block的成分的层叠水平低于display:inline-block的因素,所以浏览器就将box2渲染到box1方面,如图:

美高梅开户网址 3

灵活的施用七阶图可以让您的代码尽大概的削减z-index的运用。因为多少人开销同一个系统,固然过多的用z-index,很有恐怕会现出争持,即遮挡难点,一般的话z-index使用10以内的数值就够用了。

重点:层叠上下文

  先说一下只要创制层叠上下文,css成立层叠上下文的章程有为数不少,可是常用的也就够那么二种

  1、定位成分中z-index不等于auto的会为该因素创制层叠上下文

  2、html根元素默许会成立层叠上下文(那是一个特例,知道就行)

  3、成分的opacity不对等1会成立层叠上下文

  4、成分的transform不等于none会创造层叠上下文

还有其余方法开创层叠上下文,那里就不做牵线了,上边四中是付出中常用到的。

那么明亮怎么开创层叠上下文之后,难点的主要性来了,层叠上下文有啥用啊?

那里一定要结成后边那张七阶图,最上面那一层background便是是建立在层叠上下文的功底上的,也就是说在层叠上下文中,所有的要素都会渲染在该因素的层叠上下文背景和边框上面;在block盒子、float盒子等不存在层级上下文的因素中,子成分设置z-index为负值的时候,**那就是说子成分会被父元素遮挡**。说了说不定不太好明白,举个栗子消化一下:

XHTML

<style> #box1{ position: relative; width: 200px; height: 200px;
background: blue; } #box2{ position: relative; z-index:-1; width:
100px; height: 100px; background: yellow; } </style> <div
id=”box1″> <div id=”box2″></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    #box1{
        position: relative;
        width: 200px;
        height: 200px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index:-1;
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>
 
<div id="box1">
      <div id="box2"></div>
</div>

里,box并不曾开创层叠上下文,当子成分box2设置z-index:-1时,box2所在的层叠上下文是根成分,即html根标签,依据七阶图可以见到,box2会渲染在html标签上边,普通盒子box1(z-index:auto)上面,所以box2被挡住了。如图所示:

美高梅开户网址 4

那就是说怎么解决这一个标题呢?相信大家已经精晓这里该怎么处理了啊,是的,为box1创设一个层叠上下文,那么box1中的成分无论z-index是负的有点,都会显得在box1的背景之上,如图:

美高梅开户网址 5

那里我用了前头说的的首先种艺术去创建层叠上下文,即原则性成分中z-index不为auto的成分会确立层叠上下文,只怕有些同学开头纳闷了,box1的z-index小于box2的z-index,为何box2缺显示在box1的地方吧?呵呵,那正对应了七阶图的层叠水平的涉及,不亮堂的再仔细研商一下七阶图

· 层叠水平仅在直接父级层叠上下文中展开相比,即层叠上下文A中的子成分的层叠水平不会和另一个层叠上下文中的子成分举行相比。举个例子

XHTML

<style> #box1{ z-index: 10; position: relative; width: 200px;
height: 200px; background: green; } #box1_1{ position: relative;
z-index: 100; width: 100px; height: 100px; background: blue; } #box2{
position: relative; z-index: 11; width: 200px; height: 200px;
background: red; margin-top: -150px; } </style> <div
id=”box1″> <div id=”box1_1″> </div> </div> <div
id=”box2″> </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
26
27
28
29
30
31
32
33
<style>
    #box1{
        z-index: 10;
        position: relative;
        width: 200px;
        height: 200px;
        background: green;
    }
    #box1_1{
        position: relative;
        z-index: 100;
        width: 100px;
        height: 100px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index: 11;
        width: 200px;
        height: 200px;
        background: red;
        margin-top: -150px;
    }
</style>
 
<div id="box1">
    <div id="box1_1">    
    </div>
</div>
 
<div id="box2">
</div>

叠上下文box1中的子成分box2设置z-index为100,而层叠上下文box2的z-index唯有11,而实在的渲染效果却是,box2在box1和box1_1的地点,那就应了地点那就话,层叠水平仅在要素的首先个父级层叠上下文中开展,即层叠上下文A中的子成分的层叠水平不会和另一个层叠上下文中的子成分举行比较,也就是活box1_1的z-index对于他的父级层叠上下文之外的成分没有此外影响。那里box2和box1在同一个层叠上下文中(html根成分会默许成立层叠上下文),所以它们七个会开展层叠水平的可比,box2的z-index大于box1的z-index,所以大家见到的也就是上面这样,box2遮挡了box1,不在乎box1中的子成分z-index是有点,如图:

美高梅开户网址 6

此间本人对z-index的明亮也就讲述达成了,大致就说了以下这几点内容:

  1、z-index仅在一向元素(position不等于static)中一蹴而就

  2、七阶层叠水平图

  3、z-index层叠水平的相比较仅限于父级层叠上下文中

附带需求专注以下几点:

  1、在付出中尽量避免层叠上下文的多层嵌套,因为层叠上下文嵌套过多的话不难暴发杂乱,假如对层叠上下文精通不够的话是不好把控的。

  2、非浮层成分(对话框等)尽量不要用z-index(通过层叠顺序只怕dom顺序或然经过层叠上下文举办拍卖)

  3、z-index设置数值时尽大概用个位数

用了一夜间的日子整治了这篇小说,就连本人要好对z-index也有了尤其深刻的理解,希望对您也有扶持。如有错误
欢迎指正

2 赞 6 收藏
评论

美高梅开户网址 7

不设置z-index的层叠

利用MDN上的一个事例来证实。

为了有利于相比较,将源码简化成如下:

XHTML

<body> <div id=”absdiv1″>DIV #1</div> <div
id=”reldiv1″>DIV #2</div> <div id=”reldiv2″>DIV
#3</div> <div id=”absdiv2″>DIV #4</div> <div
id=”normdiv”>DIV #5</div> </body>

1
2
3
4
5
6
7
<body>
<div id="absdiv1">DIV #1</div>
<div id="reldiv1">DIV #2</div>
<div id="reldiv2">DIV #3</div>
<div id="absdiv2">DIV #4</div>
<div id="normdiv">DIV #5</div>
</body>

其中DIV#1DIV#4是灰色框,position设置为absolute

DIV#2DIV#3是红色框,position设置为relative

DIV#5是粉红色框,position为设置,默认static

美高梅开户网址 8

依照规则,由于DIV#5是“non-positioned”,即使DIV#5是DOM树中最终的因素,它也是最早被绘制的,因而它地处所有“positioned”的底下;而对此其余三个“positioned”的DIV,它们的绘图顺序就是依据在DOM树中的顺序绘制,即DIV#1->DIV#2->DIV#3->DIV#4

尽管DIV#5是最“先绘制”的,但是浏览器在解析HTML的时候如故是比照HTML文档流的逐一来分析的,实际的绘图顺序仍旧是DIV#1->DIV#2->DIV#3->DIV#4->DIV#5。只不过,要绘DIV#5的时候,会对影响到的因素进行重新绘制,其渲染的效果看上去的顺序是DIV#5->DIV#1->DIV#2->DIV#3->DIV#4,将DIV#5涉嫌了最前。

一、z-index

z-index用来支配成分重叠时堆叠顺序。

适用于:已经固定的因素(即position:relative/absolute/fixed)。

貌似领悟就是数值越高越靠上,好像很粗略,然则当z-index应用于复杂的HTML成分层次结构,其一举一动大概很难通晓甚至不得预测。因为z-index的堆叠规则很复杂,上面一一道来。

首先解释一个名词:

stacking
context:翻译就是“堆叠上下文”。每种成分仅属于一个堆叠上下文,成分的z-index描述成分在同一堆叠上下文中“z轴”的显现顺序。

z-index取值:

默认值auto:

当页面新生成一个box时,它默许的z-index值为auto,意味着该box不会协调发生一个新的local
stacking context,而是处于和父box相同的堆叠上下文中。

正/负整数

其一平头就是眼下box的z-index值。z-index值为0也会变卦一个local stacking
context,那样该box父box的z-index就不会和其子box做相比较,相当于隔离了父box的z-index和子box的z-index。

接下去从最简易的不利用z-index的情状早先将,规行矩步。

1 CSS2.1 中规定的层叠上下文美高梅开户网址 9

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
新环境下,层叠上下文的新转变。

float的层叠

一致是要MDN地方的例子来表明。

JavaScript

<body> <div id=”absdiv1″> <br /><span
class=”bold”>DIV #1</span> <br />position: absolute;
</div> <div id=”flodiv1″> <br /><span
class=”bold”>DIV #2</span> <br />float: left;
</div> <div id=”flodiv2″> <br /><span
class=”bold”>DIV #3</span> <br />float: right;
</div> <br /> <div id=”normdiv”> <br /><span
class=”bold”>DIV #4</span> <br />no positioning
</div> <div id=”absdiv2″> <br /><span
class=”bold”>DIV #5</span> <br />position: absolute;
</div> </body>

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
26
27
28
<body>
<div id="absdiv1">
        <br /><span class="bold">DIV #1</span>
        <br />position: absolute;
    </div>
 
    <div id="flodiv1">
        <br /><span class="bold">DIV #2</span>
        <br />float: left;
    </div>
 
    <div id="flodiv2">
        <br /><span class="bold">DIV #3</span>
        <br />float: right;
    </div>
 
    <br />
 
    <div id="normdiv">
        <br /><span class="bold">DIV #4</span>
        <br />no positioning
    </div>
 
    <div id="absdiv2">
        <br /><span class="bold">DIV #5</span>
        <br />position: absolute;
    </div>
</body>

 

其中DIV#1DIV#5是粉色框,position设置为absolute

DIV#1DIV#2是黑色框,float设置分别为leftrightopacity是1;

DIV#4是紫色框,position为设置,默认static

美高梅开户网址 10

上一节的事例类似,由于DIV#4是“non-positioned”,所以DIV#4反之亦然是首先绘制的,因而它的背景和边界将在拥有因素的最上面。而且依照规则,DIV#4中的inline-level元素()会在浮动元素绘制以后才绘制,结果是被挤到了DIV#2的右边。

依照规则,浮动成分是在“positioned”成分此前绘制,由此DIV#1DIV#5会在三个转移成分的地点。

要留意到,在那边几个<div>的并不曾安装透明度,那跟MDN上的源码有所差别。那现在,倘使完全依照MDN的源码,将DIV#1DIV#2DIV#3DIV#5opacity设置为0.7,突显结果如下:

美高梅开户网址 11

精心察看,可以发现,在装置了opacity后,DIV#3的层级被进步到了DIV#1上述了。那与CSS2.1上的确定有所差异。

如果对DIV#4设置opacity:0.99,结果特别意想不到:

美高梅开户网址 12

本来在最下边的DIV#4跑到了一发前边的岗位,只放在DIV#5之下。

由于opacity并不是在CSS2.1里确定,须求使用CSS3中新的规则来表达这些场合,更便于了然z-index的平整,现在临时不啄磨opacity所推动的熏陶,防止把规则变得更扑朔迷离。

二、不应用 z-index时堆叠顺序

不使用z-index的情况,也是默认的情事,即具有因素都休想z-index时,堆叠顺序如下(从下到上)

  • 根元素(即HTML元素)的background和borders
  • 正常流中国和亚洲平昔后代成分(这几个成分顺序根据HTML文档出现顺序)
  • 已定位后代成分(这几个成分顺序依照HTML文档出现顺序)

解释一下后两条规则:

  • 正常流中国和欧洲positoned element成分,总是先于positioned
    element成分渲染,所以突显就是在positioned
    element下方,跟它在HTML中冒出的各类无关。

  • 从未点名z-index值的positioned
    element,他们的堆叠顺序取决于在HTML文档中的顺序,越靠后出现的要素,地方越高,和position属性毫无干系。

例子:

美高梅开户网址 13<!DOCTYPE
html> <html> <head> <meta charset=”UTF-8″>
<title>Stacking without z-index</title> <style
type=”text/css”> div { font: 12px Arial; text-align: center; } .bold
{ font-weight: bold; } .opacity{opacity: 0.7;} #normdiv { height: 70px;
border: 1px dashed #999966; background-color: #ffffcc; margin: 0px
50px 0px 50px; } #reldiv1 { height: 100px; position: relative; top:
30px; border: 1px dashed #669966; background-color: #ccffcc; margin:
0px 50px 0px 50px; } #reldiv2 { height: 100px; position: relative; top:
15px; left: 20px; border: 1px dashed #669966; background-color:
#ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { position: absolute;
width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed
#990000; background-color: #ffdddd; } #absdiv2 { position: absolute;
width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed
#990000; background-color: #ffdddd; } </style> </head>
<body> <br /><br /> <div id=”absdiv1″
class=”opacity”> <br /><span class=”bold”>DIV
#1</span> <br />position: absolute; </div> <div
id=”reldiv1″ class=”opacity”> <br /><span
class=”bold”>DIV #2</span> <br />position: relative;
</div> <div id=”reldiv2″ class=”opacity”> <br
/><span class=”bold”>DIV #3</span> <br />position:
relative; </div> <div id=”absdiv2″ class=”opacity”> <br
/><span class=”bold”>DIV #4</span> <br />position:
absolute; </div> <div id=”normdiv”> <br /><span
class=”bold”>DIV #5</span> <br />no positioning
</div> </body> </html> View Code

有图有精神:

美高梅开户网址 14

 分析:

#5从未稳定,处张静常流,所以据悉以上规则,先于#1,#2,#3,#4这个已稳定成分渲染,在最下方。

#1,#2,#3,#4都是已定位成分,且未安装z-index,所以基于其在文档中现身的逐条依次被渲染,可以去掉apacity查看清晰效果。

2 CSS3 带来的转变

如上所述变化可以归为两点,大家之后相继切磋:

  1. CSS3 中众多属性会创造局地层叠上下文
  2. tranform 属性改变绝对定位子成分的隐含块

设置了z-index的层叠

再一次使用MDN中的例子:

XHTML

<body> <div id=”absdiv1″>DIV #1</div> <div
id=”reldiv1″>DIV #2</div> <div id=”reldiv2″>DIV
#3</div> <div id=”absdiv2″>DIV #4</div> <div
id=”normdiv”>DIV #5</div> </div>

1
2
3
4
5
6
7
<body>
    <div id="absdiv1">DIV #1</div>
    <div id="reldiv1">DIV #2</div>
    <div id="reldiv2">DIV #3</div>
    <div id="absdiv2">DIV #4</div>
    <div id="normdiv">DIV #5</div>
</div>

 

为了让社团进一步明白,简化了HTML源码,上面是逐个<div>的质量设置:

  • DIV#1position: absolutez-index: 5
  • DIV#2position: relativez-index: 3
  • DIV#3position: relativez-index: 2
  • DIV#4position: absolutez-index: 1
  • DIV#5position: staticz-index: 8
  • 美高梅开户网址 15
  • 又看到了丰富的DIV#5,即使它的z-index:8是拥有因素中最大的,但鉴于它是“non-posititoned”所以,它在层叠上只怕身份低下,仍旧要诚实呆在其它因素的上面。

    而对于其余“positioned”成分,它们的绘图顺序就是比照z-index的分寸来加以分别,因而尽管DIV#1在DOM树中是最靠前的,但出于它的z-index: 5比其它都大,由此就成了最顶层的成分了。

    层叠上下文

    第一,回想一下,创制层叠上下文的三种情景:

    • 根元素,创制根层叠上下文;
    • z-index不为autopositioned元素;

    ### 实例一(同一层叠上下文中的时代)

    延续应用MDN上的事例,来表达若是层叠上下文对z-index计量的震慑。

XHTML

&lt;body&gt; &lt;div id="div1"&gt; &lt;div id="div2"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;div id="div3"&gt; &lt;div id="div4"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/body&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6938563cb085489625-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6938563cb085489625-9">
9
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6938563cb085489625-1" class="crayon-line">
&lt;body&gt;
</div>
<div id="crayon-5b8f6938563cb085489625-2" class="crayon-line crayon-striped-line">
 &lt;div id=&quot;div1&quot;&gt;
</div>
<div id="crayon-5b8f6938563cb085489625-3" class="crayon-line">
    &lt;div id=&quot;div2&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6938563cb085489625-4" class="crayon-line crayon-striped-line">
 &lt;/div&gt;
</div>
<div id="crayon-5b8f6938563cb085489625-5" class="crayon-line">
 
</div>
<div id="crayon-5b8f6938563cb085489625-6" class="crayon-line crayon-striped-line">
 &lt;div id=&quot;div3&quot;&gt;
</div>
<div id="crayon-5b8f6938563cb085489625-7" class="crayon-line">
    &lt;div id=&quot;div4&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6938563cb085489625-8" class="crayon-line crayon-striped-line">
 &lt;/div&gt;
</div>
<div id="crayon-5b8f6938563cb085489625-9" class="crayon-line">
&lt;/body&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

免去其他杂乱的样式和显示,HTML的主体结构如上所示,其中的属性设置如下:

-   `DIV#1`:`position: relative`;
    -   `DIV#2`:`position: absolute`, `z-index: 1`;
-   `DIV#3`:`position: relative`;
    -   `DIV#4`:`posititon: absolute`;

从代码就可以推断出,除了根元素创建的根层叠上下文以外,还有`DIV#2`所创建的层叠上下文。因此,尽管`DIV#2`与`DIV#3`或`DIV#4`都不在一个BFC(块格式化上下文)中,但它们都同处于一个层叠上下文中,因此根据层叠规则,`DIV#2`的`z-index`最高,因此处于另外三个元素之上。

显示的结果则如下图:

美高梅开户网址 16

 

当然,如果将DIV#4设置z-index: 2,那么DIV#4就会跑到最顶部:

美高梅开户网址 17

尔后可以摸清,层叠统计时,将考虑同一个层叠上下文中的所有因素而不考虑要素是还是不是有任何关联。

三、浮动堆叠顺序

转移成分z-index地方介于非定位成分和固定成分之间。(从下到上)

  • 根成分(即HTML成分)的背景和border
  • 正常流中国和亚洲定点后代成分(这么些因素顺序依照HTML文档出现顺序)
  • 变化成分(浮动成分之间是不会产出z-index重叠的)
  • 正常流中inline后代成分
  • 已稳定后代成分(这几个成分顺序根据HTML文档出现顺序)

 non-positioned元素的背景和边际没有被变型成分影响,然而元素中的内容受影响(浮动布局脾性)

举例:

美高梅开户网址 18<!DOCTYPE
html> <html> <head> <meta charset=”UTF-8″>
<title>Stacking and float</title> <style
type=”text/css”> div { font: 12px Arial; text-align: center; } .bold
{ font-weight: bold; } .opacity{ opacity: 0.7;} #absdiv1 { position:
absolute; width: 150px; height: 200px; top: 10px; right: 140px; border:
1px dashed #990000; background-color: #ffdddd; } #normdiv { /*
opacity: 0.7; */ height: 100px; border: 1px dashed #999966;
background-color: #ffffcc; margin: 0px 10px 0px 10px; text-align: left;
} #flodiv1 { margin: 0px 10px 0px 20px; float: left; width: 150px;
height: 200px; border: 1px dashed #009900; background-color: #ccffcc;
} #flodiv2 { margin: 0px 20px 0px 10px; float: right; width: 150px;
height: 200px; border: 1px dashed #009900; background-color: #ccffcc;
} #absdiv2 { position: absolute; width: 150px; height: 100px; top:
130px; left: 100px; border: 1px dashed #990000; background-color:
#ffdddd; } </style> </head> <body> <br /><br
/> <div id=”absdiv1″ class=”opacity”> <br /><span
class=”bold”>DIV #1</span> <br />position: absolute;
</div> <div id=”flodiv1″ class=”opacity”> <br
/><span class=”bold”>DIV #2</span> <br />float:
left; </div> <div id=”flodiv2″ class=”opacity”> <br
/><span class=”bold”>DIV #3</span> <br />float:
right; </div> <br /> <div id=”normdiv”> <br
/><span class=”bold”>DIV #4</span> <br />no
positioning </div> <div id=”absdiv2″ class=”opacity”> <br
/><span class=”bold”>DIV #5</span> <br />position:
absolute; </div> </body> </html> View Code

美高梅开户网址 19

分析:

#4是正常流中国和北美洲向来的因素,所以先被渲染,在最尾部。

#2
#3一个左浮动,一个右浮动,接着被渲染。相互不会因为z-index值被掩盖。见下图。

#1
#5为已稳定的成分,最后被渲染,当浏览器窗口变小时,#5在#1上面,因为HTML文档中#5在#1后面。见下图。

 美高梅开户网址 20

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

如上列表译自:

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

实例二(拼爹的时期)

一如既往上地方的事例:

XHTML

<body> <div id=”div1″> <div id=”div2″></div>
</div> <div id=”div3″> <div id=”div4″></div>
</div> </body>

1
2
3
4
5
6
7
8
9
<body>
<div id="div1">
   <div id="div2"></div>
</div>
 
<div id="div3">
   <div id="div4"></div>
</div>
</body>

 

但方今将依次要素的特性做一些修改:

  • DIV#1position: relative
    • DIV#2position: absolute, z-index: 2
  • DIV#3position: relativez-index: 1
    • DIV#4posititon: absolutez-index: 100

在看结果以前,先依据源码揣测一下计量的结果。首先,DIV#2始建了一个层叠上下文(SC2),而DIV#2本身在根层叠上下文中的层级是2;与DIV#2远在同一个层叠上下文的DIV#3也开创了一个层叠上下文(SC3),同时鉴于其z-index1,比DIV#2要小,DIV#3本来地会屈于DIV#2之下;另外,DIV#3还有一个子成分DIV#4DIV#4众所周知是居于DIV#3所开创的层叠上下文(SC3)中,同时,自身又创造了另一个新的层级上下文(SC4)。

那么难点来了,DIV#4z-index100,比所有因素都要大,那么DIV#4会处于怎么样职位吗?

美高梅开户网址 21

从结果可以看看,DIV#2DIV#3职分和预期中是一律的,但鉴于DIV#4则是处在DIV#2之下DIV#3如上。其中缘由还,DIV#4所处的层叠上下文SC3的层级比SC2要低,由此无论DIV#4有多大,它都不会当先比我高的层叠上下文中的成分

若是改一改各种要素的属性:

  • DIV#1position: relativez-index: 1
    • DIV#2position: absolute, z-index: 100
  • DIV#3position: relativez-index: 1
    • DIV#4posititon: absolutez-index: 2

经过修改代码,我们让DIV#1DIV#3z-index1,它们在SC0(根层叠上下文)中的层级都是1,那么它们将如约DOM树的顺序来绘制,那意味DIV#3稍微比DIV#1高那么一些。

在那八个层叠上下文中,分别有子成分DIV#2DIV#4。此时,尽管DIV#2的层级数非凡大,但出于它所处的层叠上下文SC1在SC3之下,因而DIV#2不仅在DIV#4以下,还会放在DIV#3以下。突显结果如下图所示:

美高梅开户网址 22

经过那么些例子,可以更明亮得认识到,层叠的测算是相当正视所处的层叠上下文的,用刚通俗的话讲,层叠总括时代是一个拼爹的一世。

四、z-index

默许的堆叠顺序下边说了,要想改变 成分的堆叠顺序就得用到z-index。

Note:前三种情况中,尽管有成分之间的重合覆盖,可是它们都是处在同一个z-layer的。因为没有设置z-index属性,默许的渲染层就是layer
0。所以要专注,不相同层中成分之间覆盖是当然的,不过同样层中的成分也会发送覆盖。

z-index只适用于已经稳定的因素(即position:relative/absolute/fixed)。

举例:

美高梅开户网址 23<!DOCTYPE
html> <html> <head> <meta charset=”UTF-8″>
<title>Stacking without z-index</title> <style
type=”text/css”> div { font: 12px Arial; text-align: center; opacity:
0.7; } .bold { font-weight: bold; } #normdiv { z-index: 8; height:
70px; border: 1px dashed #999966; background-color: #ffffcc; margin:
0px 50px 0px 50px; } #reldiv1 { z-index: 3; height: 100px; position:
relative; top: 30px; border: 1px dashed #669966; background-color:
#ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { z-index: 2; height:
100px; position: relative; top: 15px; left: 20px; border: 1px dashed
#669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; }
#absdiv1 { z-index: 5; position: absolute; width: 150px; height: 350px;
top: 10px; left: 10px; border: 1px dashed #990000; background-color:
#ffdddd; } #absdiv2 { z-index: 1; position: absolute; width: 150px;
height: 350px; top: 10px; right: 10px; border: 1px dashed #990000;
background-color: #ffdddd; } </style> </head> <body>
<br /><br /> <div id=”absdiv1″> <br /><span
class=”bold”>DIV #1</span> <br />position: absolute;
<br />z-index: 5; </div> <div id=”reldiv1″> <br
/><span class=”bold”>DIV #2</span> <br />position:
relative; <br />z-index: 3; </div> <div id=”reldiv2″>
<br /><span class=”bold”>DIV #3</span> <br
/>position: relative; <br />z-index: 2; </div> <div
id=”absdiv2″> <br /><span class=”bold”>DIV
#4</span> <br />position: absolute; <br />z-index: 1;
</div> <div id=”normdiv”> <br /><span
class=”bold”>DIV #5</span> <br />no positioning <br
/>z-index: 8; </div> </body> </html> View Code

美高梅开户网址 24

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

小结

到此地,可以收获一些定论:

  • 在同一个层叠上下文中总结层叠顺序时,按照前文所波及的规则来展开就是;
  • 对于不一样的层叠上下文的因素,层级较大的层叠上下文中的成分用于处于层级小的层叠上下文中的成分之上(MG12将其归纳为从父规则);
  • 从另一个角度了解,不一致层叠上下文中的成分在总结层叠顺序时不会相互影响,因为在层叠上下文被创设的时候它与其它上下文的层叠顺序就早已经被操纵了;

五、stacking context

何以上个例子中成分的堆叠顺序受z-index的熏陶呢?因为那一个要素有些尤其的属性触发它们生活堆叠上下文(stacking
context)。

难题来了,什么样的因素会扭转堆叠上下文呢?符合上边规则之一的:

  • 根元素(即HTML元素)
  • 已稳定成分(即相对定位或绝对稳定)并且z-index不是默许的auto。
  • a flex item with a z-index value other than “auto”,
  • 要素opacity属性不为1(See the specification for opacity)
  • 元素transform不为none
  • 元素min-blend-mode不为normal
  • 要素filter属性不为none
  • 元素isolation属性为isolate
  • on mobile WebKit and Chrome 22+, position: fixed always creates a
    new stacking context, even when z-index is “auto” (See this post)
  • specifing any attribute above in will-change even you don’t write
    themselves directly (See this post)
  • elements with -webkit-overflow-scrolling set to “touch”

在堆叠上下文(stacking context)中
,子成分的堆叠顺序仍然遵从上述规则。重点是,子成分的z-index值只在父元素范围内有效。子堆叠上下文被看成是父堆叠上下文中一个独门的模块,相邻的堆叠上下文完全没什么。

小结几句:

渲染的时候,先确定小的stacking context中的顺序,一个小的stacking
context确定了之后再将其位于父stacking
context中堆叠。有种由内而外,由小及大的觉得。

举例来说:HTML结果如下,最外层是HTML成分,包蕴#1 #2
#3,#3中又饱含着#4,#5,#6。

Root(HTML)

  • DIV #1
  • DIV #2
  • DIV #3
    • DIV #4
    • DIV #5
    • DIV #6

美高梅开户网址 25<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“; <html
xmlns=”” xml:lang=”en”> <head>
<title>Understanding CSS z-index: The Stacking Context: Example
Source</title> <style type=”text/css”> * { margin: 0; }
html { padding: 20px; font: 12px/20px Arial, sans-serif; } div {
opacity: 0.7; position: relative; } h1 { font: inherit; font-weight:
bold; } #div1, #div2 { border: 1px solid #696; padding: 10px;
background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; }
#div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position:
absolute; top: 40px; left: 180px; width: 330px; border: 1px solid #900;
background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 {
border: 1px solid #996; background-color: #ffc; } #div4 { z-index: 6;
margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1;
margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position:
absolute; top: 20px; left: 180px; width: 150px; height: 125px; border:
1px solid #009; padding-top: 125px; background-color: #ddf;
text-align: center; } </style> </head> <body> <div
id=”div1″> <h1>Division Element #1</h1>
<code>position: relative;<br/> z-index: 5;</code>
</div> <div id=”div2″> <h1>Division Element
#2</h1> <code>position: relative;<br/> z-index:
2;</code> </div> <div id=”div3″> <div id=”div4″>
<h1>Division Element #4</h1> <code>position:
relative;<br/> z-index: 6;</code> </div>
<h1>Division Element #3</h1> <code>position:
absolute;<br/> z-index: 4;</code> <div id=”div5″>
<h1>Division Element #5</h1> <code>position:
relative;<br/> z-index: 1;</code> </div> <div
id=”div6″> <h1>Division Element #6</h1>
<code>position: absolute;<br/> z-index: 3;</code>
</div> </div> </body> </html> View Code

效果:

美高梅开户网址 26 

 分析一下:

1、因为安装了div {opacity: 0.7; position:
relative;},所以#1~#6的z-index都是实惠的。

2、为什么#4的z-index比#美高梅开户网址 ,1高,可是却在#1下面?因为#4的z-index纵然值大,但它的成效域在富含块#3内,而#1的z-index的功用域在html内,和#3同属html,而#3的z-index小于#1。

3、为什么#2的z-index值比#5的大,还在底下?同上。

4、#3的z-index是4,但该值和#4,#5,#6的z-index不持有可比性,它们不在一个上下文环境。

5、怎么样轻易的论断七个成分的堆叠顺序?

z-index对堆叠顺序的操纵类似于排版时候一大章下多少个小节的楷模,或然版本号中一个大的版本号跟着小版本号。

Root-z-index值为默许auto,即0

  • DIV #2 – z-index 值为2
  • DIV #3 – z-index 值为4
    • DIV #5 – z-index值为 1,其父成分z-index值 4,所以最后值为4.1
    • DIV #6 – z-index值为 3,其父成分z-index值 4,所以最终值为4.3
    • DIV #4 – z-index值为 6,其父成分z-index值 4,所以最终值为4.6
  • DIV #1 – z-index 值为5

想看愈多例子,可参看文章最后的资源链接。

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

美高梅开户网址 27

创办层叠上下文

前文曾经关系,根成分以及z-indexauto的“positioned”成分得以会创造新的层叠上下文,那也是CSS2.1规范唯一涉嫌的,不过在CSS3中,创制层叠上下文的触及条件有了改动,在MDN中有如下描述:

文档中的层叠上下文由知足以下任意一个条件的要素形成:

  • 根元素 (HTML),
  • 相对(absolute)定位或绝对(relative)定位且 z-index
    值不为”auto”,
  • 一个 flex 项目(flex item),且 z-index 值不为 “auto”,也就是父元素display: flex|inline-flex,
  • 要素的 opacity 属性值小于 1(参考 the specification for
    opacity),
  • 要素的 transform 属性值不为 “none”,
  • 要素的 mix-blend-mode 属性值不为 “normal”,
  • 要素的 isolation 属性被安装为 “isolate”,
  • 在 mobile WebKit 和 Chrome 22+ 内核的浏览器中,position: fixed
    总是创制一个新的层叠上下文, 即便 z-index 的值是 “auto” (参考
    这篇作品),
  • 在 will-change 中指定了任意 CSS
    属性,固然你未曾概念该因素的那些属性(参考 那篇小说)
  • 要素的 -webkit-overflow-scrolling 属性被设置 “touch”

六、 合理使用z-index数值

假定现有多少个堆叠的层,从上到下分别为:DIV3,DIV2,DIV1,设置时以100为距离,设置DIV1的z-index为0,DIV2的z-index为100,设置DIV3的z-index为200。那样中期如若要求在DIV1和DIV2之间投入一些层的话,以10为距离,设置z-index为10,20等。再须要向z-index0和z-index10中间投入一层的话以5为距离。那样的写法可以一本万利中期增加添加内容。

尽量防止给z-index使用负值。当然不是纯属的,比如在做图文替换的时候可以使用负值。

opacity的影响

在此地,大家看看了充足无不侧目的opacity,原来它也开创了一个新的层叠上下文。为何opacity小于1时亟待创制新的层叠上下文呢?在CSS3-color中有这么的演讲。

Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1.

鉴于一个opacity小于1的成分需求依靠这一个因素以外的图像来合成,因而它外表内容不只怕依据z-index被层叠到该因素的剧情中间(子成分也会变得透明,借使存在z-index不为auto的“positioned”子成分,那么那个子成分就须求与表面因素进行层叠计算,透明部分就会有意料之外的一个钱打二十四个结结果),因而它需求创立一个新的层叠上下文,以防止外部内容对该因素的透明化内容导致影响。

那么opacity对实际的层叠会有啥震慑啊?规范中这样讲述的:

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. See section 9.9
and Appendix E of [CSS21] for more information on stacking contexts.
The rules in this paragraph do not apply to SVG elements, since SVG
has its own rendering model ([SVG11], Chapter 3).

  • opacity低于1的“non-positioned”成分,它就会被看做一个z-index: 0opacity: 1的“positioned”成分一样,来拓展层叠总括(前文规则中的第6层);
  • opacity低于1的“positioned”成分,它将鲁人持竿前文中z-index的层叠规则总括技术,只然则,固然z-indexauto,如故会创建层叠上下文;

重回在此之前探究“不设置z-index的层叠”时用到的事例:

XHTML

<body> <div id=”flodiv2″>DIV #1</div> <div
id=”normdiv”>DIV #2</div> <div id=”flodiv2″>DIV
#3</div> <div id=”normdiv”>DIV #4</div> <div
id=”absdiv2″>DIV #5</div> </body>

1
2
3
4
5
6
7
<body>
<div id="flodiv2">DIV #1</div>
    <div id="normdiv">DIV #2</div>
    <div id="flodiv2">DIV #3</div>
    <div id="normdiv">DIV #4</div>
    <div id="absdiv2">DIV #5</div>
</body>

DIV#3opacity设置为0.7,突显结果如下:

美高梅开户网址 28

所有的opacity稍差于1的要素都是“positioned”,z-index默认为auto,即为0,根据规则6(层叠级数为0的子成分以及“positioned”且层叠级数为0的后生成分),它将不是浮动元素,而是一个“positioned”且层叠级数为0的成分,因此它将会被绘制到DIV#1之上(如果opacity为1,它应有是在DIV#1之下的);

设若仅将DIV#4设置opacity: 0.9,那么结果会是:

美高梅开户网址 29

那么DIV#4就是opacity小于1的non-positioned要素,它将一如既往被当成z-index: 0opacity: 1 的
“positioned”成分一样,即是规则6(层叠级数为0的子成分以及“positioned”且层叠级数为0的后生元素),由于它与其他因素都处在z-index: 0,由此依据DOM树的逐条,它将仅在DIV#5以下。(即使将其它具备因素都安装opacity小于1,那么所有的那些因素都是按照规则6进行层叠总计,那么结果就是基于DOM树顺序爆发)

Problem solved!!!

有关其余接触条件,就不再一一分析了。

七、资源链接

MDN z-index

understanding css z-index

w3c z-index

 

一、z-index
z-index用来决定成分重叠时堆叠顺序。 适用于
:已经固定的成分(即position:relative/absolute/fixed)。 一…

总结

  • 要素设置了z-index后,必须将position设置为fixedabsoluterelative才回使z-index开创新的层叠上下文或生效;
  • 根元素(<html>)拥有一个根层叠上下文;
  • 计量层叠顺序时,要求先考虑因素所处的层叠上下文,层叠上下文之间的层叠关系一直控制了其成分集合之间的层叠关系(从父规则);
  • opacity及部分其余新的CSS3属性的安装也大概创制新的层叠上下文,这么些属性的引入让层叠总括变得越发扑朔迷离;
  • 层叠总结规则基本是(不是最纯粹的讲述):
    1. 创造层叠上下文的成分的背景和边际;
    2. z-index为负值的子成分;
    3. “non-positioned”的元素;
    4. “non-positioned”的成形成分;
    5. “non-positioned”的内联成分(文本等);
    6. z-index为0的“positioned”元素;
    7. z-index超越等于1的“positioned”子成分;

层叠上下文是个比较少接触的定义,但那又是一个这几个首要的概念,它控制了成分的层叠顺序的总计办法,尤其是使用z-index对元素层叠进行控制的时候,即使不掌握层叠上下文的定义,就便于遭逢各类各个奇怪的难点,有时候,那些题材被错误的归纳为浏览器的“BUG”。实际上,大部分浏览器都是基于标准办事的,不要轻易地多疑浏览器,而是要去看看规范中是怎样定义规则的。

本文大批量参考并引述MDN上的文字和源码,并在其基础上作多少改动以求更不难明了的讲演。假设对源码有问题,请先去MDN上参照相关源码和文献。

本文是依据自个儿对层叠上下文的就学和透亮记录而成,由于自身是初专家,不敢保障文中所有观点都是不利的,因而我的意见仅作参考,若觉察文中有荒唐,欢迎咱们提议,我会尽快作出更正。

参考

Specifying the stack level: the ‘z-index’
property

Understanding CSS
z-index

Stacking without
z-index

Stacking and
float

CSS Stacking
Context里那个无人问津的坑

css3-color-#transparency

CSS z-index
属性的选用格局和层级树的定义

position 属性和 z-index
属性对页面节点层级影响的例子

1 赞 2 收藏
评论

美高梅开户网址 30

发表评论

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

网站地图xml地图