【亚洲必赢官网】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

【亚洲必赢官网】index堆叠规则,不起眼的。<style> #box1{ background: blue; width: 200px; height: 200px; }
#box2{ background: yellow; width: 200px; height: 200px;
margin-top:-100px; } </style> <div id=”box1″></div>
<div id=”box2″></div>

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

大家意在box1要出示在box2上边,可能那时候有同学会说,给box1加一个z-index大于0的值就能够了,那样是狼狈的,如图:

亚洲必赢官网 1

box2遮挡了box1,即便box1设置z-index值再大也枉然,前边说了z-index只在一贯元素(position=static除外,因为元素默许就是static,相当于没用position样式)中作用,也是就z-index要合营position一起使用感兴趣的可以亲自证实一下,那里只引玉之砖。

层叠顺序对相对元素的Z轴顺序

层叠顺序其实不是z-index独有的,每个元素都有层叠顺序,元素渲染的先后顺序跟它有很大关系,不言而喻当元素暴发层叠时,元素的层级高的会优先呈现在地方,层级一样的则会依据dom的先后顺序举行渲染,前边的会覆盖后面的。文字再多可能也尚无一张图来的第一手,上面那张图是“七阶层叠水平”(网上盗的,很经典的一张图)

亚洲必赢官网 2

再举个栗子,那里如故拿刚才不行栗子来说,在毫不z-index的前提下,利用css层叠顺序解决遮挡难题,代码修改如下

CSS

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

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

那边只做了轻微的修改,就是给box1加了一个display:inline-block;的样式,这里解释一下,首先box1和box2发生了层叠,然后box默认为块级元素,即display:block,从七阶图中看出,display:block的元素的层叠水平低于display:inline-block的因素,所以浏览器就将box2渲染到box1上面,如图:

亚洲必赢官网 3

利落的采用七阶图能够让你的代码尽可能的压缩z-index的应用。因为三个人开支同一个系统,尽管过多的用z-index,很有可能会现出争持,即遮挡问题,一般的话z-index使用10以内的数值就够用了。

重中之重:层叠上下文

  先说一下比方成立层叠上下文,css创制层叠上下文的方法有为数不少,不过常用的也就够那么三种

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

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

  3、元素的opacity不对等1会创造层叠上下文

  4、元素的transform不等于none会创立层叠上下文

还有此外方式开创层叠上下文,那里就不做牵线了,下面四中是付出中常用到的。

那就是说通晓怎么开创层叠上下文之后,难点的基本点来了,层叠上下文有哪些用呢?

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

XHTML

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

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

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

亚洲必赢官网 4

这就是说怎么化解这一个题目啊?相信大家已经明白那里该怎么处理了呢,是的,为box1建立一个层叠上下文,那么box1中的元素无论z-index是负的多少,都会展现在box1的背景之上,如图:

亚洲必赢官网 5

那里我用了前头说的的率先种方法去创造层叠上下文,即定位元素中z-index不为auto的要素会建立层叠上下文,可能有的同学初叶纳闷了,box1的z-index小于box2的z-index,为啥box2缺显示在box1的下边吧?呵呵,那正对应了七阶图的层叠水平的涉及,不精晓的再精心商讨一下七阶图

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

XHTML

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

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

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

亚洲必赢官网 6

此地自己对z-index的了然也就讲述完结了,大约就说了以下这几点内容:

  1、z-index仅在定点元素(position不对等static)中有效

  2、七阶层叠水平图

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

襄助必要留意以下几点:

  1、在付出中尽量幸免层叠上下文的多层嵌套,因为层叠上下文嵌套过多的话不难发生杂乱,若是对层叠上下文了然不够的话是不佳把控的。

  2、非浮层元素(对话框等)尽量不要用z-index(通过层叠顺序或者dom顺序或者经过层叠上下文举办处理)

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

用了一夜间的时刻整理了那篇文章,就连自家自己对z-index也有了尤其长远的明白,希望对您也有帮衬。如有错误
欢迎指正

2 赞 6 收藏
评论

亚洲必赢官网 7

CSS3 中的层叠上下文初探

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

原文出处: HaoyCn   

序言:关于层叠上下文,作者还并未去阅读更详尽的 W3C
规范来驾驭更本质的原理(表打我,等自己校招获得 offer 了自家就读好伐
T_T)。一直传闻 CSS3
里的层叠上下文有新景况,但没找到很好的参考资料,故自己实战一把。鉴于小编水平有限,如有任何疏漏或者失实,则呼吁读者斧正。

z-index堆叠规则,z-index堆叠

前段时间记得好像是何人在群里指出了一个其实是让我们都认为很不晓得的一个难题:

1 CSS2.1 中确定的层叠上下文亚洲必赢官网 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用来支配元素重叠时堆叠顺序。

适用于:已经固化的要素(即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>

2 CSS3 带来的转变

总的看变化可以归为两点,大家随后依次商讨:

  1. CSS3 中众多属性会创建局地层叠上下文
  2. tranform 属性改变相对定位子元素的盈盈块

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

不使用z-index的情况,也是默许的情景,即具备因素都毫不z-index时,堆叠顺序如下(从下到上)

  • 根元素(即HTML元素)的background和borders
  • 正常流中非定点后代元素(那么些元素顺序根据HTML文档出现顺序)
  • 已定位后代元素(这个元素顺序依照HTML文档出现顺序)

解释一下后两条规则:

  • 正常流中非positoned element元素,总是先于positioned
    element元素渲染,所以展现就是在positioned
    element下方,跟它在HTML中出现的次第毫无干系。

  • 没有点名z-index值的positioned
    element,他们的堆叠顺序取决于在HTML文档中的顺序,越靠前面世的因素,地方越高,和position属性无关。

例子:

亚洲必赢官网 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

有图有精神:

亚洲必赢官网 10

 分析:

#5不曾定点,处于正常流,所以根据以上规则,先于#1,#2,#3,#4这么些已稳定元素渲染,在最下方。

#1,#2,#3,#4都是已稳定元素,且未安装z-index,所以据悉其在文档中冒出的相继依次被渲染,能够去掉apacity查看清晰效果。

倘诺自己大家设定LI为position:relative;设置span为position:absolute;那么大家会发现无论是SPAN的z-index值设置得再高都将永生永世在前面父级的上面。

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地点介于非定位元素和稳定元素之间。(从下到上)

  • 根元素(即HTML元素)的背景和border
  • 正常流中国和亚洲永恒后代元素(那几个因素顺序按照HTML文档出现顺序)
  • 变迁元素(浮动元素之间是不会并发z-index重叠的)
  • 正常流中inline后代元素
  • 已稳定后代元素(那一个因素顺序根据HTML文档出现顺序)

 non-positioned元素的背景和边界没有被转移元素影响,不过元素中的内容受影响(浮动布局特性)

举例:

亚洲必赢官网 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

亚洲必赢官网 12

分析:

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

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

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

 亚洲必赢官网 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.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

默许的堆叠顺序上边说了,要想更改 元素的堆叠顺序就得用到z-index。

Note:前二种情景中,固然有元素之间的重合覆盖,然则它们都是处于同一个z-layer的。因为从没安装z-index属性,默许的渲染层就是layer
0。所以要留心,差异层中元素之间覆盖是本来的,不过同样层中的元素也会发送覆盖。

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

举例:

亚洲必赢官网 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

亚洲必赢官网 15

 试一下很不难发现大家的子级,z-index的值达到了1000的被设定了position:absolut;子级都被档在了父级的底下。我想了很久,我觉着其根本难点是:设置同样的position:relative/absolute;同级标签之间的阶段是无能为力用z-index超过的。大家地点的事例中的第三个LI的等级永远都要小于后一个LI的级差,所以大家在LI里的子级身上设置了position:absolute;,给了万分高的z-index值。

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

亚洲必赢官网 16

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

亚洲必赢官网 17<!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

效果:

亚洲必赢官网 18 

 分析一下:

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,并且属性都亟需平等如何是好?当然大家不大会要求有这么的功能。不过大家要求有如此的功力:子级全体是隐形的,当有鼠标反应时出现同时浮在享有的情节之上。大家要了解,那真的是件令人胸口痛的事,因为大家地方见识到了,子级在展现的时候都被压在了下一个父级标签的底下。下边我们来完成一下以此鼠标反应的固化成效:

六、 合理使用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;}

那是点名父级重组了层叠的种种,若是只要没有艺术一一指定父级的依次重组,那即将看看本文前边部分,可是也不是怎样难题都能化解,不过看看也许能帮您想到更好的法门!

 

正文来源: 和

 

 

网站地图xml地图