index积聚法则,层叠上下文
分类:前端技术

CSS3 中的层叠上下文初探

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

初藳出处: HaoyCn   

前言:关于层叠上下文,小编还未有去阅读更详实的 W3C 规范来打探更本质的规律(表打作者,等本人校招获得 offer 了本身就读好伐 T_T)。向来听他们讲 CSS3 里的层叠上下文有新情形,但没找到很好的参照他事他说加以考察资料,故自个儿实战一把。鉴于小编水平有限,如有任何脱漏也许失实,则伏乞读者斧正。

深入CSS属性(九):z-index,深入css属性z-index

借使您不是一名csser菜鸟,想必你对z-index的用法应该有个大致的打听了啊,z-index能够垄断定位成分在垂直于显示器方向(Z 轴)上的堆集顺序,本文不去描述基本的API怎么样选择,而是去更浓郁的摸底z-index是什么样行事的,使用z-index的时候有怎样难题,以致z-index在平常支付中的使用。 上面我们经过贰个例证来引进昨天的正文,代码示例:

<style type="text/css">
 .red, .green, .blue {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
 }
 .red {
  background-color: red;
  z-index: 1;
 }
 .green {
  background-color: green;
  top: 70px;
  left: 70px;
 }
 .blue {
  background-color: blue;
  top: 140px;
  left: 140px;
 }
</style>  
<div>
 Red box
</div>
<div>
 Green box
</div>
<div>
 Blue box
</div>

如下图: 图片 1

上述代码简单明了,上边有个难点请大家想想: 在根据下述法规的状态下,如何利用深橙span成分在green和blue成分后边?

1) 不能以其余形式改造html标志;

2) 不能够充实或退换任何因素的z-index属性;

3) 不恩扩张或退换任何因素的position属性;

请大家想想,那么些难题改什么缓慢解决?表达其原因?

z-index堆集法则,z-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上的源码,别的一些是透过细微改换,目标是为着更加好得把难点呈报得更领会。

1 CSS2.1 中明确的层叠上下文图片 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 新条件下,层叠上下文的新转换。

----------------------------------- 分割线

一、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的事态起头将,按部就班。

不设置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

图片 3

依赖法则,由于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论及了最前。

2 CSS3 带来的生成

看来变化能够归为两点,大家以后依次研讨:

  1. CSS3 中众多属性会成立局地层叠上下文
  2. tranform 属性退换相对定位子成分的包蕴块

一、z-index 白金法规及stack context

1) 贰个box和它的父亲有同样的聚积品级(stack level),除非该box被通过z-index属性赋予了不一样的stack level;

2) z-index属性只适应于position属性为relative、absolute、fixed的要素对象;

3) 给三个被固定(positioned)成分设置小于1的opacity属性值,意味着创立了叁个堆放上下文(stack context),就好像给该因素扩展了三个z-index值;

4) 对于二个被positioned box,如若钦点了z-index属性,意味着:

->该box的stack level 在眼下的stack context中;

->该box创建了个地点stack context;

5) 假诺box未有一些名z-index,元素将被按上边的依次堆成堆(stacked)(从后到前):

-> 符合规律流中的boxes,根据在源代码中的类别;

-> 浮动boxes;

-> computed后display属性值为inline/inline-block/inline-table的boxes;

-> positioned boxes 和boxes 设置opacity值小于1,遵照在源代码中的种类;

 

 

就此,当大家给一个positioned成分设置了z-index时,大家做了两件事:

1) 该因素与在它前边或然前边的成分分享着同等的stack context,那也正是我们转移z-index的值,元素会活动别的因素前前者后的来由。

2) 为该因素内的别的因素创造了三个新的stack context,一旦您创制了三个stack context,内部的别的有(stack context)的其余层都会滞留在此个stack context。 通过上述的金子法规,或许你早就清楚地点拾壹分题目标答案了。在黄金法规里,大家关系了个新名词“stack context”,上面我们经过一个实例来介绍它:

<!DOCTYPE html>
<html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>z-index example</title>
</head>
<body>
<h1>Header</h1>  
<p>I am paragraph. <em> I am em</em></p>   
</body>
</html>

三个很奇特的事态是,在二个document中,未有别的定点,document有且唯有三个聚积情况

  • 透过HTML创制。 上面我们给上例增添如下样式:

    h1, p {
     position: relative;
    } 
    h1 {
     z-index: 2;
    }
    p {
     z-index: 1;
    }
    

在此种景色下,h1,p都创设了二个stack context,那多少个stack context都在document的stack context内。增添样式后h1在p成分之上。即使大家给em成分扩充如下样式结果又会如何:

  h1, p, em {
   position: relative;
  } 
  h1 {
   z-index: 2;
   background-color: #f0f;
  }
  p {
   z-index: 1;
   background-color: #00f;
   line-height: 40px;
  }
  em {
   z-index: 1;
   background-color: #f00;
  }

充实此体制后em创建了stack context,由于em的z-index属性,它的里边的text比p标签中的另外text更类似顾客。因为它是在p的stack context内部,它是间接比h第11中学的text低的。 注意:要是您增添z-index的值,是不能使用em位于h1之上的。要是你想三个context的成分位于另八个context中的成分之上,你必需升高全体context可能安装它们为同一的context。 上面是三种缓慢解决方案: 方案一:

  h1, p, em {
   position: relative;
  } 
  h1 {
   z-index: 2;
   background-color: #f0f;
  }
  p {
   /* raise the entire context,p and em 都在h1 之上了*/
   z-index: 3;
   background-color: #00f;
   line-height: 40px;
   margin-top: -40px;
  }
  em {
   z-index: 1;
   background-color: #f00;
  }

方案二:

  h1, p, em {
   position: relative;
  } 
  h1 {
   z-index: 2;
   background-color: #f0f;
  }
  p {
   background-color: #00f;
   line-height: 40px;
   margin-top: -40px;
  }
  em {
   /*  put them into the same context */
   z-index: 2;
   background-color: #f00;
  }

二、不使用 z-index时积聚顺序

不使用z-index的情况,也是私下认可的气象,即怀有因素都不要z-index时,堆积顺序如下(从下到上)

  • 根元素(即HTML元素)的background和borders
  • 不荒谬流中国和澳洲定位后代成分(那个因素顺序根据HTML文书档案出现顺序)
  • 已牢固后代成分(这几个因素顺序根据HTML文书档案出现顺序)

解释一下后两条准则:

  • 平常流中国和欧洲positoned element成分,总是先于positioned element成分渲染,所以展现正是在positioned element下方,跟它在HTML中冒出的顺序非亲非故。
  • 从不点名z-index值的positioned element,他们的堆集顺序决计于在HTML文书档案中的顺序,越靠前面世的要素,地点越高,和position属性无关。

例子:

图片 4<!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

有图有本质:

图片 5

 分析:

#5没有固定,处李晖常流,所以依靠上述准则,先于#1,#2,#3,#4那么些已牢固成分渲染,在最下方。

#1,#2,#3,#4都以已定位成分,且未安装z-index,所以根据其在文书档案中出现的一一依次被渲染,能够去掉apacity查看清晰效果。

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

图片 6

上一节的例子类似,由于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,展现结果如下:

图片 7

紧凑考查,能够窥见,在安装了opacity后,DIV#3的层级被拉长到了DIV#1如上了。那与CSS2.1上的规定有所分化。

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

图片 8

本来在最上面包车型大巴DIV#4跑到了一发前边的任务,只放在DIV#5之下。

由于opacity并不是在CSS2.1里规定,须要利用CSS3中新的平整来解说那多少个光景,更易于驾驭z-index的条条框框,今后近些日子不钻探opacity所带动的影响,防止把法规变得更头晕目眩。

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

上述列表译自:

,提示广大读者,别看粤语版,因为汉语版并不是实时跟进更新的,且翻译不太标准

二、创建stack context及注意事项

那么创设stack context的措施有哪些?

1) When an element is the root element of a document (theelement)

2) When an element has a position value other than static and a z-index value other than auto

3) When an element has an opacity value less than 1

Update: In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

 

In WebKit, styling a box with position:fixed or -webkit-overflow-scrolling:touch implicitly creates a stacking context, just like adding a z-index value.

Also, be aware of these CSS3 “triggers”:

transform != none

transform-style: preserve-3d

filter != none clip-path, mask

Lastly, even though a relatively positioned element without a z-index set does not establish a stacking context… A common IE bug, often seen in drop-down menus, is that any relatively positioned element that has haslayout set to true establishes a stacking context. One may visualize this bug by setting [A] and [B] to position:relative, while [a] gets position:relative; z-index:1. Now, dragging [A] under [B] hides [a] - in Internet Explorer, that is. Any positioned child with a z-index is caught by this wrong stacking context of its parent.

三、浮动堆放顺序

浮动成分z-index位置介于非定位成分和一直成分之间。(从下到上)

  • 根成分(即HTML元素)的背景和border
  • 寻常流中国和亚洲长久后代元素(这么些要素顺序根据HTML文书档案出现顺序)
  • 变迁成分(浮动成分之间是不会晤世z-index重叠的)
  • 经常流中inline后代成分
  • 已稳定后代成分(那些因素顺序依照HTML文书档案出现顺序)

 non-positioned元素的背景和边界未有被转移成分影响,然而成分中的内容受影响(浮动布局天性)

举例:

图片 9<!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

图片 10

分析:

#4是平常流中国和欧洲一定的因素,所以先被渲染,在最尾部。

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

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

 图片 11

设置了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
  • 图片 12
  • 又来看了那多少个的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`最高,因此处于另外三个元素之上。

显示的结果则如下图:

图片 13

 

当然,如果将DIV#4设置z-index: 2,那么DIV#4就能跑到最最上端:

图片 14

日后能够识破,层叠总结时,将思虑同一个层叠上下文中的全体因素而不怀恋因素是不是有其余关联。

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

三、z-index在少数浏览器中的难题

1) IE6中的 select成分是多个窗口控件,所以它总是现身在层叠顺序的最上部而不会照管到自然层叠顺序、position属性也许是z-index。能够在div成分上增加多个iframe设置为position:absolute,并安装div的z-index比iframe的高。

2) 因父容器(成分)被一定的来由,IE6/7会错误的对其stacking context举行重新设置。

3) 在Firefox2版本中,贰个负的z-index值会使成分位于stacking context的末端,并不是放在公众感觉的背景和边框那样的要素stacking context早先。 本文到此甘休,最终附上本文带头时建议的主题素材的答案:

/* add this */
div:first-child {
opacity: .99;
}

感激您的读书,文中不妥之处,还望评论指正。

四、z-index

默许的聚成堆顺序下面说了,要想改动 成分的堆放顺序就得用到z-index。

Note:前二种状态中,即便有元素之间的重合覆盖,可是它们都是高居同一个z-layer的。因为从没安装z-index属性,暗许的渲染层就是layer 0。所以要在乎,不相同层七月素之间覆盖是本来的,可是同样层中的成分也会发送覆盖。

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

举例:

图片 15<!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

图片 16

实例二(拼爹的一世)

照例上地方的例证:

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会处在什么岗位吗?

图片 17

从结果能够看到,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以下。展现结果如下图所示:

图片 18

由此那一个例子,能够更明白得认知到,层叠的企图是万分依赖所处的层叠上下文的,用刚通俗的话讲,层叠总结时代是二个拼爹的时代。

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

图片 19

四、参考链接:

Find out how elements stack and start using low z-index values

The Z-Index CSS Property: A Comprehensive Look

Elaborate description of Stacking Contexts

Overlapping And ZIndex

CSS/Properties/z-index

Understanding CSS z-index(MDN)

What No One Told You About Z-Index

测试Demo:

 

原载于: Benjamin 
本文链接:  
如需转发请以链接模式注解原载或原来的作品地址。

五、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

图片 20<!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

效果:

图片 21 

 深入分析一下:

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

想看愈来愈多例子,可参看文章最后的财富链接。

小结

到此处,可以赢得部分结论:

  • 在同贰个层叠上下文中总计层叠顺序时,依照前文所涉嫌的平整来打开正是;
  • 对此不一样的层叠上下文的成分,层级十分的大的层叠上下文中的成分用于处于层级小的层叠上下文中的成分之上(MG12将其归咎为从父准则);
  • 从另二个角度通晓,不一致层叠上下文中的成分在测算层叠顺序时不会相互影响,因为在层叠上下文被创立的时候它与别的上下文的层叠顺序就早就经被操纵了;

CSS中z-index属性具体是什?

层相对于荧屏纵深方向的种种。你用多少个层叠在协同就可观看它的意义。
如以下是不无关系测验代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">

<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<div style="position:relative; width:150px; height:100px; z-index:2; background-color:Red;"></div>
<div style="position:relative; width:150px; height:100px; z-index:1; top:-20px; background-color:Blue;"></div>
</body>
</html>

说明:
先是个DIV模块中,大家定义了大幅度为150,中度为100,背景观为革命,z-index:2 inherit;此DIV的等第为2
其次个DIV模块中,我们定义了上升的幅度亦为150,中度为100,背景象为金色,z-index:1 inherit;此DIV等级为1,top:-20px垂直向上-20象素.
2>1
地点的DIV模块品级高于上边包车型地铁DIV模版品级.所以,大家在position:relative;中得以回味到是上一层遮住了下一层.而且遮住了小编们设定的20象素的区域.  

六、 合理施用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使用负值。当然不是相对的,举个例子在做图文替换的时候能够行使负值。

创建层叠上下文

前文曾经提到,根成分乃至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”

CSS样式中z-index属性

概念和用法z-index 属性设置成分的堆集顺序。具备更加高堆成堆顺序的因素总是会处在堆积顺序异常的低的要素的前头。注释:成分可具备负的 z-index 属性值。注释:Z-index 仅能在定点成分上奏效(比如position:absolute;)!  

如若您不是一名csser新手,想必你对z-index的用法应该有个大约的询问了啊,z-index能够决定定位元...

七、能源链接

MDN z-index

understanding css z-index

w3c z-index

 

一、z-index z-index用来支配成分重叠时堆集顺序。 适用于 :已经固化的要素(即position:relative/absolute/fixed)。 一...

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,显示结果如下:

图片 22

所有的opacity低于1的要素都以“positioned”,z-index默认为auto,即为0,依据法则6(层叠级数为0的子成分以至“positioned”且层叠级数为0的后人成分),它将不是生成成分,而是三个“positioned”且层叠级数为0的要素,由此它将会被绘制到DIV#1之上(如果opacity为1,它应当是在DIV#1之下的);

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

图片 23

那么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!!!

至于其他接触条件,就不再一一分析了。

总结

  • 要素设置了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 收藏 评论

图片 24

本文由pc28.am发布于前端技术,转载请注明出处:index积聚法则,层叠上下文

上一篇:面向属性的CSS命名,迅雷页面 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • index积聚法则,层叠上下文
    index积聚法则,层叠上下文
    CSS3 中的层叠上下文初探 2015/10/09 · CSS ·层叠上下文 初藳出处: HaoyCn    前言:关于层叠上下文,小编还未有去阅读更详实的 W3C规范来打探更本质的规律
  • png图片制作自便颜色的小Logo,PNG格式小Logo的CS
    png图片制作自便颜色的小Logo,PNG格式小Logo的CS
    PNG格式小Logo的CSS率性颜色赋色技艺 2016/06/08 · CSS · 1评论 ·PNG 原著出处:张鑫旭(@张鑫旭)    一、眼见为实 本内容要是是对张鑫旭PNG格式小Logo的CSS跋
  • 的居中效果,纯CSS七大居中方法
    的居中效果,纯CSS七大居中方法
    使用 Sass mixin 达成 CSS 的居中效能 2015/08/15 · CSS ·Sass 原来的小讲出处: HugoGiraudel   译文出处:公子肥马轻裘    就算使用 CSS创造居中功用需求耍一些噱
  • UI组件化的一些思想,js长远学习详细深入分析
    UI组件化的一些思想,js长远学习详细深入分析
    前端 UI组件化的一些思考 2017/04/10 · 基础技术 ·组件化 原文出处: 王一蛋    最近公司推起了共用 UI 组件化的大潮,创建了一个新的 Repo 来放置共用的
  • JavaScript开发工具大全,开发者的
    JavaScript开发工具大全,开发者的
    JavaScript 代码静态品质检查 2015/07/15 · JavaScript·品质检查 原作出处: 百度efe -笔者内江人(@i笔者三亚人)    自鸿蒙初判,Brendan Eich 10天捏出 Mocha 之后