您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net层叠上下文,中的层叠上下文初探

新葡亰496net层叠上下文,中的层叠上下文初探

发布时间:2019-08-24 13:35编辑:新葡亰官网浏览(56)

    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>
    

    如下图: 新葡亰496net 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 中规定的层叠上下文新葡亰496net 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

    新葡亰496net 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属性非亲非故。

    例子:

    新葡亰496net 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

    有图有本质:

    新葡亰496net 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

    新葡亰496net 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,展现结果如下:

    新葡亰496net 7

    全面察看,可以窥见,在设置了opacity后,DIV#3的层级被提升到了DIV#1如上了。那与CSS2.1上的规定有所分化。

    如果对DIV#4设置opacity:0.99,结果尤其意料之外:

    新葡亰496net 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成分的背景和境界未有被转移元素影响,不过成分中的内容受影响(浮动布局天性)

    举例:

    新葡亰496net 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

    新葡亰496net 10

    分析:

    #4是寻常流中国和南美洲稳固的因素,所以先被渲染,在最尾部。

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

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

     新葡亰496net 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
    • 新葡亰496net 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`最高,因此处于另外三个元素之上。
    
    显示的结果则如下图:
    

    新葡亰496net 13

     

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

    新葡亰496net 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)。

    举例:

    新葡亰496net 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

    新葡亰496net 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会处在什么样岗位吗?

    新葡亰496net 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以下。显示结果如下图所示:

    新葡亰496net 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 收藏 评论

    新葡亰496net 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

    新葡亰496net 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

    效果:

    新葡亰496net 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">

    新葡亰496net层叠上下文,中的层叠上下文初探。<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,突显结果如下:

    新葡亰496net 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,那么结果会是:

    新葡亰496net 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 收藏 评论

    新葡亰496net 24

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net层叠上下文,中的层叠上下文初探

    关键词: