>

index堆叠规则,却能牵扯出这么大的学问

- 编辑:至尊游戏网站 -

index堆叠规则,却能牵扯出这么大的学问

不值朝气蓬勃提的 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一同行使感兴趣的能够亲身说贝拉米(Nutrilon)下,这里只引玉之砖。

层叠顺序对相对成分的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营造一个层叠上下文,那么box第11中学的成分无论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>

叠上下文box第11中学的子成分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,不在乎box第11中学的子成分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积聚法则,z-index聚积

一、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时堆集顺序

不使用z-index的情况,也是默许的情事,即怀有因素都休想z-index时,聚积顺序如下(从下到上)

  • 根元素(即HTML元素)的background和borders
  • 寻常流中国和北美洲稳住后代元素(那些要素顺序依据HTML文书档案现身顺序)
  • 已稳固后代元素(那么些成分顺序遵照HTML文书档案现身顺序)

解释一下后两条法规:

  • 不奇怪流中国和亚洲positoned element成分,总是先于positioned element成分渲染,所以显示正是在positioned element下方,跟它在HTML中冒出的相继非亲非故。
  • 不曾点名z-index值的positioned element,他们的堆放顺序决定于在HTML文书档案中的顺序,越靠后现身的因素,地方越高,和position属性非亲非故。

例子:

至尊游戏网站 8<!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

有图有实质:

至尊游戏网站 9

 分析:

#5从未固定,处陈岚常流,所以据他们说上述准则,先于#1,#2,#3,#4这些已稳固元素渲染,在最下方。

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

三、浮动堆集顺序

变迁成分z-index地点介于非定位成分和定点成分之间。(从下到上)

  • 根成分(即HTML成分)的背景和border
  • 日常流中国和北美洲稳固后代成分(这一个要素顺序依照HTML文书档案现身顺序)
  • 转移成分(浮动成分之间是不会冒出z-index重叠的)
  • 符合规律流中inline后代成分
  • 已定位后代成分(那几个要素顺序依照HTML文书档案现身顺序)

 non-positioned成分的背景和边际未有被变型成分影响,不过元素中的内容受影响(浮动布局天性)

举例:

至尊游戏网站 10<!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

至尊游戏网站 11

分析:

#4是寻常流中国和澳洲定位的要素,所以先被渲染,在最尾巴部分。

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

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

 至尊游戏网站 12

四、z-index

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

Note:前两种状态中,即使有成分之间的交汇覆盖,可是它们都以处于同贰个z-layer的。因为没有设置z-index属性,暗中同意的渲染层正是layer 0。所以要小心,区别层中元素之间覆盖是当然的,不过同样层中的成分也会发送覆盖。

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

举例:

至尊游戏网站 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; 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

至尊游戏网站 14

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

至尊游戏网站 15<!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

效果:

至尊游戏网站 16 

 解析一下:

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

想看越来越多例子,可参照随笔最后的财富链接。

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

七、能源链接

MDN z-index

understanding css z-index

w3c z-index

 

生机勃勃、z-index z-index用来支配成分重叠时堆积顺序。 适用于 :已经固定的要素(即position:relative/absolute/fixed)。 少年老成...

本文由门户名站发布,转载请注明来源:index堆叠规则,却能牵扯出这么大的学问