但是你真的了解z-index吗,原文出处

作者: 前端  发布:2019-11-07

不起眼的 z-index 却能牵扯出这么大的学问

2016/04/30 · CSS · z-index

初藳出处: DongFeng吹雪   

z-index在平常费用中算是多个相比较常用的体制,平时明白正是设置标签在z轴前后相继顺序,z-index值大的显得在最前头,小的则会被屏蔽,是的,z-index的莫过于效果正是那般。

唯独你真的了然z-index吗?你精通它有怎样特点吗?这里先抛出多少个名词:“层叠顺序(stacking order卡塔 尔(英语:State of Qatar)”,“层叠上下文(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的值就足以了,那样是不对的,如图:

9159.com 1

box2遮挡了box1,尽管box1安装z-index值再大也枉然,后边说了z-index只在定位成分(position=static除此而外,因为成分默许正是static,也正是没用position样式卡塔尔国中作用,也是就z-index要同盟position一齐利用感兴趣的能够亲身说美素佳儿下,这里只进行试探。

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

层叠顺序其实不是z-index唯有的,每一个成分都有层叠顺序,成分渲染的前后相继顺序跟它有超级大关系,同理可妥帖元素发生层叠时,成分的层级高的会先行展现在地点,层级同样的则会基于dom的前后相继顺序进行渲染,前边的会覆盖前面包车型地铁。文字再多或许也未有一张图来的直白,下边那张图是“七阶层叠水平”(英特网盗的,很杰出的一张图卡塔 尔(阿拉伯语:قطر‎

9159.com 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地方,如图:

9159.com 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被屏蔽了。如图所示:

9159.com 4

那正是说怎么解决这么些题目吗?相信我们已经了然这里该怎么管理了呢,是的,为box1建构一个层叠上下文,那么box第11中学的成分无论z-index是负的多少,都交易会示在box1的背景之上,如图:

9159.com 5

那边自身用了前头说的的率先种办法去成立层叠上下文,即固定成分中z-index不为auto的要素会建立层叠上下文,或然有的同学初始纳闷了,box1的z-index小于box2的z-index,为啥box2缺突显在box1的上边吧?呵呵,那正对应了七阶图的层叠水平的关系,不亮堂的再精心揣摩一下七阶图

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

XHTML

<style> #box1{ z-index: 10; position: relative; width: 200px; height: 200px; background: green; } #box1_1{ position: relative; z-index: 100; width: 100px; height: 100px; background: blue; } #box2{ position: relative; z-index: 11; width: 200px; height: 200px; background: red; margin-top: -150px; } </style> <div id="box1"> <div id="box1_1"> </div> </div> <div id="box2"> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
    #box1{
        z-index: 10;
        position: relative;
        width: 200px;
        height: 200px;
        background: green;
    }
    #box1_1{
        position: relative;
        z-index: 100;
        width: 100px;
        height: 100px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index: 11;
        width: 200px;
        height: 200px;
        background: red;
        margin-top: -150px;
    }
</style>
 
<div id="box1">
    <div id="box1_1">    
    </div>
</div>
 
<div id="box2">
</div>

叠上下文box1中的子元素box2设置z-index为100,而层叠上下文box2的z-index只有11,而实质上的渲染效果却是,box2在box1和box1_1之处,那就应了地点那就话,层叠水平仅在要素的率先个父级层叠上下文中开展,即层叠上下文A中的子成分的层叠水平不会和另贰个层叠上下文中的子成分进行比较,约等于活box1_1的z-index对于他的父级层叠上下文之外的因素未有任何影响。这里box2和box1在同二个层叠上下文中(html根成分会默许创制层叠上下文卡塔 尔(英语:State of Qatar),所以它们四个交易会开层叠水平的可比,box2的z-index大于box1的z-index,所以大家看来的也便是底下那样,box2遮挡了box1,不留意box第11中学的子成分z-index是稍稍,如图:

9159.com 6

这里作者对z-index的理解也就汇报完结了,大致就说了以下这几点内容:

  1、z-index仅在固化元素(position不等于static卡塔 尔(英语:State of Qatar)中央银卓有成效

  2、七阶层叠水平图

  3、z-index层叠水平的可比只限于父级层叠上下文中

援救须求在意以下几点:

  1、在开垦中尽量防止层叠上下文的多层嵌套,因为层叠上下文嵌套过多的话轻便产生头晕目眩,尽管对层叠上下文科理科解远远不够的话是不佳把控的。

  2、非浮层成分(对话框等卡塔尔国尽量不要用z-index(通过层叠顺序或然dom顺序或然通过层叠上下文进行拍卖卡塔 尔(英语:State of Qatar)

  3、z-index设置数值时尽恐怕用个位数

用了大器晚成晚上的年月整治了那篇随笔,就连本身要好对z-index也可以有了一发浓郁的知晓,希望对您也是有救助。如有错误 接待指正

2 赞 6 收藏 评论

9159.com 7

z-index堆集法规,z-index堆成堆

这段日子记得好疑似什么人在群里建议了叁个事实上是让大家都感觉非常不知底的叁个难点:

CSS3 中的层叠上下文初探

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

原稿出处: HaoyCn   

前言:关于层叠上下文,小编还没去阅读更详实的 W3C 标准来打探更本质的规律(表打小编,等作者校招得到 offer 了本人就读好伐 T_T卡塔 尔(阿拉伯语:قطر‎。一向据说 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的情事开首将,绳趋尺步。

  1. <ul>
  2. <li>第一块</li>
  3. <li><span>第二块</span></li>
  4. <li>第三块</li>
  5. <li>第四块</li>
  6. <li>第五块</li>
  7. </ul>

1 CSS2.1 中规定的层叠上下文9159.com 8

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的情况,也是暗中同意的景观,即具备因素都不用z-index时,堆放顺序如下(从下到上卡塔尔国

  • 根元素(即HTML元素)的background和borders
  • 符合规律流中国和亚洲定位后代元素(那么些成分顺序根据HTML文书档案现身顺序卡塔 尔(英语:State of Qatar)
  • 已牢固后代成分(那几个因素顺序依据HTML文书档案出现顺序卡塔 尔(英语:State of Qatar)

解释一下后两条准则:

  • 平常流中国和澳洲positoned element成分,总是先于positioned element成分渲染,所以呈现就是在positioned element下方,跟它在HTML中出现的顺序毫不相关。
  • 尚无点名z-index值的positioned element,他们的积聚顺序决议于在HTML文书档案中的顺序,越靠后现身的成分,地点越高,和position属性非亲非故。

例子:

9159.com 9<!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

9159.com ,有图有真相:

9159.com 10

 分析:

#5不曾一定,处刘芳常流,所以基于上述准绳,先于#1,#2,#3,#4那个已牢固成分渲染,在最下方。

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

要是自身大家设定LI为position:relative;设置span为position:absolute;那么大家会发觉无论是SPAN的z-index值设置得再高都将永久在末端父级的上边。

2 CSS3 带给的转移

如上所述变化能够归为两点,我们现在依次钻探:

  1. CSS3 中繁多属性会创设局地层叠上下文
  2. tranform 属性改换相对定位子成分的含有块

三、浮动堆成堆顺序

变化元素z-index地方介于非定位成分和永远成分之间。(从下到上卡塔尔

  • 根元素(即HTML成分卡塔尔国的背景和border
  • 寻常流中国和亚洲稳住后代成分(那个要素顺序遵照HTML文书档案现身顺序卡塔尔国
  • 变动成分(浮动成分之间是不会并发z-index重叠的)
  • 符合规律流中inline后代成分
  • 已稳固后代成分(那个要素顺序依据HTML文书档案现身顺序卡塔 尔(阿拉伯语:قطر‎

 non-positioned成分的背景和边际未有被扭转成分影响,可是成分中的内容受影响(浮动布局天性卡塔尔国

举例:

9159.com 11<!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

9159.com 12

分析:

#4是平常流中国和欧洲永世的要素,所以先被渲染,在最底部。

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

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

 9159.com 13

  1. *{margin:0; padding:0; list-style:none;}
  2. li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
  3. li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

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

以上列表译自:

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

四、z-index

暗中同意的聚成堆顺序上边说了,要想校订 成分的堆放顺序就得用到z-index。

Note:前两种状态中,就算有成分之间的交汇覆盖,不过它们都以高居同一个z-layer的。因为还未有设置z-index属性,默许的渲染层正是layer 0。所以要在乎,差别层瓜时素之间覆盖是当然的,可是相似层中的元素也会发送覆盖。

z-index只适用于已经稳固的要素(即position:relative/absolute/fixed卡塔 尔(英语:State of Qatar)。

举例:

9159.com 14<!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

9159.com 15

 试一下超轻巧觉察大家的子级,z-index的值高达了1000的被设定了position:absolut;子级都被档在了父级的上面。作者想了非常久,作者觉着其根本难点是:设置相像的position:relative/absolute;同级标签之间的级差是力无法及用z-index超过的。大家地点的例证中的第多少个LI的阶段长久都要低于后三个LI的等第,所以大家在LI里的子级身上设置了position:absolute;,给了老大高的z-index值。

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

五、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卡塔 尔(英语:State of Qatar)中 ,子成分的堆成堆顺序还是信守上述准绳。珍重是,子成分的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

9159.com 16<!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

效果:

9159.com 17 

 解析一下:

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

想看更多例子,可参谋文章最终的财富链接。

可能你会如此来想:只要本着有span的LI设置position:relative;不就好了吗?极度科学。当别的的LI都不设置position:relative;那么大家必要的可怜子级就能够浮在有着的剧情之上。不过尽管实际,全数的LI中都要有span,并且属性都须求生龙活虎致怎么办?当然我们不大会须要犹如此的法力。不过我们供给有诸有此类的法力:子级全都以藏身的,当有鼠标反适合时宜现身同期浮在享有的内容之上。大家要精晓,那着实是件令人胸口痛的事,因为大家地点见识到了,子级在展示的时候都被压在了下二个父级标签的下面。上边大家来促成一下那几个鼠标反应的原则性功能:

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

9159.com 18

六、 合理运用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使用负值。当然不是纯属的,比如在做图像和文字替换的时候可以使用负值。

  1. <ul>
  2. <li><a href="" title=""><span>第一块</span></a></li>
  3. <li><a href="" title=""><span>第二块</span></a></li>
  4. <li><a href="" title=""><span>第三块</span></a></li>
  5. <li><a href="" title=""><span>第四块</span></a></li>
  6. <li><a href="" title=""><span>第五块</span></a></li>
  7. </ul>

七、财富链接

MDN z-index

understanding css z-index

w3c z-index

 

生机勃勃、z-index z-index用来支配成分重叠时堆放顺序。 适用于 :已经固化的要素(即position:relative/absolute/fixed卡塔 尔(阿拉伯语:قطر‎。 少年老成...

我们透过链接的鼠标事件来变成此人展览馆示隐蔽效果:

  1. *{margin:0; padding:0; list-style:none;}
  2. li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
  3. li a {position:relative; z-index:1; display:block; height:100px; width:100px;  background:#000;}
  4. li a:hover {background:#000000;}
  5. li span {display:none;}
  6. li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}

咱俩设定了a为position:relative;这样她的子级就能依照父级的左上角为坐标原点实行一定了。然后大家设定span的活灵活现形象以致稳固属性,然后把他潜伏了。大家再经过A的伪类:hover使得span被激活。大家看一下结实,我们会意识,全体应该在地点的明天全在下边了。那咱们怎么消除那几个难点呢,其实以CSS想强行突破是不太也许,所以大家掉转想,能否让这几个从未被触发的父级标签未有position:relative;属性,而只是接触的时候才有级那么些父级赋上如此的值?其实想到这里基本上已经能够消除全数的标题了:

  1. *{margin:0; padding:0; list-style:none;}
  2. li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
  3. li a {display:block; height:100px; width:100px;  background:#000;}
  4. li a:hover {position:relative; z-index:1; }
  5. li span {display:none;}
  6. li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

大家纵然针对a:hover来设定其性质为position:relative;就足以了,那样唯有在鼠标触发的时候A才会被赋于八个周旋稳固的性质。那样就成功能够缓和被别的父级标签所挡的窘迫了。

当然假设不在意IE5那样的浏览器我们还足以把代码再做简化:

  1. <ul>
  2. <li><span>第一块</span></li>
  3. <li><span>第二块</span></li>
  4. <li><span>第三块</span></li>
  5. <li><span>第四块</span></li>
  6. <li><span>第五块</span></li>
  7. </ul>

CSS能够改成这么:

  1. *{margin:0; padding:0; list-style:none;}
  2. li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
  3. li:hover {position:relative; z-index:1;}
  4. li span {display:none;}
  5. li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

补充:

上文讲了定位中的等第,最近再看的时候发掘文中讲得并不深透,未有直指关键。所以特意的在这里边做出补充希望能把position中的品级讲得愈加清楚、显明一些。

咱俩都精通,position有多个差异的值,分别为:static | absolute | fixed | relative。在苏昱的《CSS2粤语手册》中是这么解释的:static:无极其定位,对象服从HTML定位法则; absolute:将目的从文书档案流中拖出,使用left,right,top,bottom等属性实行相对定位。而其层叠通过z-index属性定义。那个时候目的不享有边距,但依然有补白和边框; relative:对象不可层叠,但将依据left,right,top,bottom等质量在例行文书档案流中偏移地方; fixed:IE5.5及NS6尚不帮忙此属性。

但是要想改正目的的层叠地点须要的是另三个CSS属性:z-index。但是这一个z-index并不是是万能的,他境遇了HTML代码等级的钳制。z-index只可以在同级其他HTML上浮现她的功效。这里须要注解的是z-index唯有在对象的position值为relative/absolute时才足以利用。上边大家就举些例子来批注等第的特点:

  1. <div id="box_1">
  2.   <div id="a">那是率先个块</div>
  3.   <div id="b">那是第叁个块</div>
  4. </div>

本着地点的那些HTML代码大家还需求写生龙活虎段CSS来定义它:

  1. #a,#b {position:absolute; width:300px; height:100px;  }
  2. #a {z-index:10; left:0; top:0;  background:#000; }
  3. #b {z-index:1; left:20px; top:20px; background:#c00; }

那是最普通的在此种状态下#a与#b的层叠等第是能够因而z-index来设定的。那是没问的,那么怎么样的情景下就能够现出难点吗?大家再看三个实例:

  1. <div id="box_1">
  2.   <div id="a">那是首先个块</div>
  3. </div>
  4. <div id="box_2">
  5.   <div id="b">那是第叁个块</div>
  6. </div>

听别人讲这些组织再写叁个CSS,要小心那些CSS中的不相同的地点:

  1. #box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
  2. #a, #b {position:absolute; width:100px; height:300px; }
  3. #a {background:#c00;  z-index:100; }
  4. #b {background:#0c0;  z-index:1; left:50px;}

那会儿大家看,无论#a设为多大的值,他都爱莫能助越过#b,所以说z-index是力不胜任冲破HTML的阶段的,他必得是要同等级的事态下才得以表明威力.那么怎么着息灭那个标题吧?小编能够扭转想,堂兄弟之间的相继不能够被重新组合,何不把老伯的等第做二遍重新组合呢?所以咱们把#box_1的CSS中到场叁个z-index:100; 在#box_2的CSS中出席z-index:1;这样再看一下作用:

  1. #box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
  2. #box_1 {z-index:100;}
  3. #box_2 {z-index:1;}
  4. #a, #b {position:absolute; width:100px; height:300px; }
  5. #a {background:#c00; }
  6. #b {background:#0c0; left:50px;}

那是内定父级重新整合了层叠的次第,假若风流洒脱旦未有章程风流罗曼蒂克一钦赐父级的顺序重新组合,那就要看看本文前边部分,可是亦非何许难点都能消释,可是看看大概能帮您想到更加好的不二诀要!

 

正文来源: 和

 

 

本文由9159.com发布于前端,转载请注明出处:但是你真的了解z-index吗,原文出处

关键词: