index不敢问津的事情,index堆叠规则

没人告诉你关于z-index的局地事

2015/07/23 · CSS ·
z-index

原文出处: Philip
Walton   译文出处:HelKyle(@Helkyle)   

关于z-index的标题是广大程序员都不驾驭它是何许起成效的。说起来不难,可是大部分人并没有花时间去看规范,那频繁会照成严重的后果。

您不信?那就联手来看看上面的难题。

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

至于z-index很少有人去深切的问询它,因为它看起来不难也不复杂,不就是什么人的数字大,何人就浮现在前面吧?但是今日所摘录的那篇博文,让自身吃惊了。我肯定自身一贯不曾花时间去看现实的z-index相关文档,所以自己之所以忽视了有关z-index的一部分重大的信息。

<style
type=”text/css”></style>
<link href=”public.css”
rel=”stylesheet” type=”text/css”/>

问题

在底下的HTML我们写了3<div>要素,然后每个<div>要素里面都有一个元素,每个要素都有个背景观,并且使用absolute稳定,为了能更明了地看到z-index的意义,大家写了部分别样的体制。第四个`元素的z-index值为1`,其余多个从未设置。

代码如下:

XHTML

<div> <span class=”red”>Red</span> </div>
<div> <span class=”green”>Green</span> </div>
<div> <span class=”blue”>Blue</span> </div>
.red, .green, .blue { position: absolute; } .red { background: red;
z-index: 1; } .green { background: green; } .blue { background: blue; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>
 
.red, .green, .blue {
  position: absolute;
}
.red {
  background: red;
  z-index: 1;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

See the Pen Stacking Order
(problem) by Philip Walton
(@philipwalton) on
CodePen.

接下来挑战来了:
尝试把粉红色的“元素放到任何多少个要素前面,可是必须遵从下边的条条框框:

  • 不可能改改HTML的情节
  • 无法充实或修改任何因素的z-index属性
  • 不可以充实或涂改任何因素的position属性

想挑衅一些以来,就点击上边Codepen的Edit按钮去品味一下呢。假设你不可能不辱义务,那就跟着看下来。

一、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的景色初始将,规行矩步。

不依赖我吧?好吧,看看你是或不是缓解下边这几个标题:

事先级 <span style=”color:red;”></span>
越接近元素的css属性优先级越高

不留余地方案

See the Pen Stacking Order
(problem) by Philip Walton
(@philipwalton)
on CodePen.

化解方案很简单,你只必要给革命的`标签增加一个opacity小于1`,像上面那样:

XHTML

div:first-child { opacity: .99; }

1
2
3
div:first-child {
  opacity: .99;
}

万一你觉得神乎其神了,不信任透明度会潜移默化叠加顺序,那么恭喜你,即将学习新的技艺,一早先看到自家也不信。

接下去让大家来寻找一番。

二、不选取 z-index时堆叠顺序

不使用z-index的情况,也是默许的图景,即所有因素都无须z-index时,堆叠顺序如下(从下到上)

  • 根元素(即HTML元素)的background和borders
  • 正常流中国和欧洲定点后代元素(那几个元素顺序根据HTML文档出现顺序)
  • 已定位后代元素(这一个要素顺序依照HTML文档出现顺序)

解释一下后两条规则:

  • 正常流中国和亚洲positoned element元素,总是先于positioned
    element元素渲染,所以显示就是在positioned
    element下方,跟它在HTML中出现的相继非亲非故。

  • 尚未点名z-index值的positioned
    element,他们的堆叠顺序取决于在HTML文档中的顺序,越靠前面世的元素,地点越高,和position属性非亲非故。

例子:

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

有图有真相:

亚洲必赢官网 2

 分析:

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

#1,#2,#3,#4都是已定位元素,且未设置z-index,所以据悉其在文档中出现的逐一依次被渲染,可以去掉apacity查看清晰效果。

问题:

在 接下来的HTML里
有多少个<div>元素,并且每个<div>里含有一个<span>元素。每
个<span>被分级给定一个背景颜色:红、绿、蓝。每个<span>被停放到文档的左上角附近,部分重叠着别的的<span>元素,那样您就足以观察什么样是被堆叠在前面。第二个<span>有一个z-index的值为1,而其它七个没有任
何z-index值。

以下就是其一HTML和它的中坚CSS。

HTML代码

<div>
  Red
</div>
<div>
  Green
</div>
<div>
  Blue
</div>

CSS代码:

.red, .green, .blue {
  position: absolute;
  /*其它样式省略*/
}
.red {
  background: red;
  z-index: 1;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

看起来的成效图应该是那样子的:

亚洲必赢官网 3

 

 

选拔器优先级
行内style >ID拔取器 > class类选拔器>html标签选拔器
.new ul li a.blue{color:blue;}> a:hover{color:red;} >
.white{color:white;}

堆叠顺序

z-index看起来很简短,z-index值大的因素在z-index值小的元素前边,对啊?但实际上那只是z-index的一有的用法。很多程序猿都认为很简单,没有花太多时间去认真读书规则。

HTML中的每一元素都是在别的因素的面前或者后边。那是众所周知的堆叠顺序(Stacking
Order),那条规则在w3c规范内部说的很精通,但自身面前提到过了,大多数程序猿并不确实驾驭。

如若没有涉及z-indexposition质量的话,那规则很不难,堆叠顺序就是因素在HTML中出现的依次。(当然假如您对行内元素运用负margin的话,莫不意况会复杂一些。)

加上position特性的话,就是独具定位了得元素在并未被一定的要素前面。(一个元素被固化的意趣那里指的是它有一个position质量,不过不是static,而是relative,absolute等)

再加上z-index属性,事情就变得多少奇怪。首先z-index值越大,越靠前。但是z-index属性只听从在被固化了的元素上。所以只要您在一个没被固定的因素上行使z-index的话,是不会有效益的。还有就是z-index会创建一个堆叠的上下文(Stacking
Contexts),我们可以精通为一个层。

三、浮动堆叠顺序

转移元素z-index地方介于非定位元素和固定元素之间。(从下到上)

  • 根元素(即HTML元素)的背景和border
  • 正常流中国和亚洲一直后代元素(那些元素顺序根据HTML文档出现顺序)
  • 变化元素(浮动元素之间是不会合世z-index重叠的)
  • 正常流中inline后代元素
  • 已稳定后代元素(那一个要素顺序按照HTML文档出现顺序)

 non-positioned元素的背景和边界没有被变型元素影响,然则元素中的内容受影响(浮动布局特性)

举例:

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

亚洲必赢官网 5

分析:

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

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

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

 亚洲必赢官网 6

挑战:

index不敢问津的事情,index堆叠规则。尝试使革命<span>元素堆在红色和肉色<span>的前面,不要打破以下规则:

  • 绝不以其余措施改变HTML标记
  • 不用添加/修改任何因素的z-index属性
  • 并非添加/修改任何因素的position属性

借使你找到了答案,那么它应该像上边那样:

亚洲必赢官网 7

<span style=””>优先级最高</span>

堆叠上下文

同一个父元素下边的要素会受父元素的堆叠顺序影响,所以堆叠上下文是大家领略z-index和堆叠顺序的关键。(上边为了简化,我们称堆叠上下文为层。)

每一个层都有唯一的根节点。当一个要素创制一个层,那么它的所有子元素都会遭遇父元素的堆叠顺序影响。意味着一旦一个因素位于一个最低地方的层,那你z-index安装得再大,它也不会出现在任何层元素的地方。

方今我们的话说哪些情状下会发出新的层:

  • 当一个要素位于HTML文档的最外层(<html>元素)
  • 当一个因素被定位了还要有所一个z-index值(不为auto)
  • 当一个元素被安装了opacitytransformsfilterscss-regionspaged media等属性。

一二条条条框框,Web开发者都清楚,纵然他们不必然知道怎么描述

最终一条,是广大非w3c规范内部的篇章很少涉及的。平日来讲,即使一个CSS属性必要做一些神效的话,它都会成立一个新的层。

潜移默化堆叠顺序的要素有众多,我推荐你去看w3c规范,那篇文章我们最主要探索关于层的内容。

四、z-index

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

Note:前二种情形中,就算有元素之间的重叠覆盖,不过它们都是地处同一个z-layer的。因为尚未设置z-index属性,默许的渲染层就是layer
0。所以要注意,差别层中元素之间覆盖是自然的,不过同样层中的元素也会发送覆盖。

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

举例:

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

亚洲必赢官网 9

缓解方案:

以此解决措施是在率先个<div>里(青色<span>的父节点)添加一个低于1的opacity属性值。上面就是被加上的CSS的例子:

div:first-child {
  opacity: .99;
}

要是你现在很受惊,但是仍然百思不得其解,并且不相信opacity能决定哪些元素堆在前头,那么是时候看看关于体制的文档了。当第三遍在那几个题材上被苦恼时自我同一很吃惊。

期望接下去的始末可以让您对那几个问题更通晓些。

(2)三个选拔器的预先级计算
假定,用1象征标签选取器,10代表类选取器,100代表ID选取器,1000意味着行内样式
H2{color:#FF0000} 优先级 1
.news h2{color:#0000FF} 优先级 11
div.news h2{color:#00FF00} 优先级 12
div#news h2{color:#FFFF00} 优先级 102

一致层里面的堆叠顺序

下边是如出一辙层里面的堆叠顺序(从后到前):

  • 层的根元素
  • 被定位了得元素并且z-index值为负,相同z-index的境况下,根据HTML元素的书写顺序排列,上边相同。
  • 从未有过被定位的要素
  • 被一定的因素,并且z-index值为auto
  • 被固化了的元素并且z-index值为正。

注意:z-index值为负的元素比较越发,他们会先被绘制,意味着她们得以出现在其余因素的前边,甚至出现在它的父元素前边。然则须要条件是该因素必须与父元素处于相同层,并且父元素不是其一层的根元素。一个很好的例子

驾驭了什么和哪些时候会时有暴发一个新的层,那么下次即使您碰着z-index值设了很大,不过不起成效的话就去探访它的上代是或不是爆发了一个新的层。

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

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

效果:

亚洲必赢官网 11 

 分析一下:

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看上去如此简约:高的z-index堆在低的z-index的前方,对啊?那实质上是错的,是z-index难题的一局部。它看起来如此的大致,以至于许多开发者没有花相应的大运去读相关的规则。

每一个在HTML文档中的元素既可以在其余因素的前头,也得以在其他因素的背后。那就是所谓的堆栈顺序。决定以此顺序的规则被百般知情的定义在说明文档中,可是就如从前我曾经提到过,那几个文档没有被多数开发者们完全弄了然。

当z-index和position属性不被概括在内时,那几个规则分外不难:基本上,堆栈顺序和因素在HTML中冒出的一一一样。(好呢,其实是有好几错综复杂的,不过如果您不拔取压缩边界来重叠行内元素,你也许不会赶下边界难题。)

当您把岗位属性也包罗在内介绍时,任何固定元素(和她们的子元素)都在非定位元素前被突显出来。(说一个因素被“定位”意思是它有一个分歧于静态的岗位值,例如相对的,相对的,等等。)

最终,当z-index被提及时,事情变的有些复杂。最初,很当然的比方带有高z-index值的要素会在蕴藏低z-index值的要素后面,可是后来发
现没那么不难。首先,z-index只对一定元素起效果。倘若您品尝对非定位元素设定一个z-index值,那么一定不起功效。其次,z-index值能
创制堆栈上下文环境,并且突然发现接近简单的东西变的一发错综复杂了。

 

总结

说了这么多,我们来给前边的代码加上堆叠顺序。

XHTML

<div><!– 1 –> <span class=”red”><!– 6
–></span> </div> <div><!– 2 –> <span
class=”green”><!– 4 –><span> </div>
<div><!– 3 –> <span class=”blue”><!– 5
–></span> </div>

1
2
3
4
5
6
7
8
9
<div><!– 1 –>
  <span class="red"><!– 6 –></span>
</div>
<div><!– 2 –>
  <span class="green"><!– 4 –><span>
</div>
<div><!– 3 –>
  <span class="blue"><!– 5 –></span>
</div>

当大家设置了opacity然后成为下边那样。

XHTML

<div><!– 1 –> <span class=”red”><!– 1.1
–></span> </div> <div><!– 2 –> <span
class=”green”><!– 4 –><span> </div>
<div><!– 3 –> <span class=”blue”><!– 5
–></span> </div>

1
2
3
4
5
6
7
8
9
<div><!– 1 –>
  <span class="red"><!– 1.1 –></span>
</div>
<div><!– 2 –>
  <span class="green"><!– 4 –><span>
</div>
<div><!– 3 –>
  <span class="blue"><!– 5 –></span>
</div>

红色的`从6变成1.1`,我用’.’来标记它是新生成的层里面的率先个元素。

最后我们来计算一下为啥黑色的会去到下面:
一开始有两个层,一个由根节点产生,一个由设置了`z-index:1`并且`position:absolute`的红色
暴发。当大家设置了opacity时,暴发了第五个层,并且第多个层把紫色`产生的层包裹了,意味着刚开始的z-index的作用域只在第三个层里面。而所有的

`都不曾固定如故z-index,所以他们的堆叠顺序按照HTML出现顺序排列,于是第多个层就去到上边。

六、 合理利用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-index和货栈顺序工作原理的主要。


一个仓房上下文都有一个HTML元素作为它的根元素。当一个新的仓库上下文在一个要素上形成,那么这一个库房上下文子禽限制所有的子元素以堆栈的顺序存储在一
个专门的地点。那表示若是一个要素被含有在处于底部堆栈顺序的堆栈上下文中,那么就平素不办法先出现于其余处于更高的库房顺序的两样堆栈上下文元素,尽管z-index值是十亿也更加!

现在,堆栈上下文有二种艺术可以在一个要素上形成:

  • 当一个因素是文档的根元素时(<html>元素)
  • 当一个要素有一个position值而不是static,有一个z-index值而不是auto
  • 当一个要素有一个opacity值小于1

前三种变异堆栈上下文的法门具有很大意义并且被周边Web开发者所驾驭(纵然他们不清楚那个被誉为啥)。第三种格局(opacity)大约平素没在w3c表达文档之外被提及过。

*{font-size:12px;} //通用接纳器 ie6不协助,少用
h1{font-size:12px;} // 标签选拔器
<div class=””></div> //类样式 【使用最多】
<div id=””></div> // id 选择器 【多用于js调用,id唯一】

引进阅读

  • Elaborate description of Stacking
    Contexts
  • The stacking
    context
  • The Z-Index CSS Property: A Comprehensive
    Look

    1 赞 3 收藏
    评论

亚洲必赢官网 12

七、资源链接

MDN z-index

understanding css z-index

w3c z-index

 

一、z-index
z-index用来控制元素重叠时堆叠顺序。 适用于
:已经定位的因素(即position:relative/absolute/fixed)。 一…

用堆栈顺序决定一个因素的岗位

事实上,为一个页面上的拥有因素决定全局堆栈顺序(包含边界、背景、文本节点、等等)是杰出复杂的,并且远远当先了本文讲述的限量(再一遍,参考文档)。不过大家最大的目标,就是着力驾驭那个顺序,它可以在很长一段时间内辅助大家增强CSS开发的可预测性。所以,让大家打破顺序,分解为单身的堆栈上下文。

多元素拔取器
h1,h2{color:red;}

在同样的库房上下文里的库房顺序

上面是几条基本的平整,来控制在一个独自的堆栈上下文里的仓库顺序(从后迈入):

  1. 仓库上下文的根元素
  2. 固定元素(和她俩的子元素)带着负数的z-index值(高的值被堆叠在低值的前边;相同值的因素根据在HTML中冒出的次第堆叠)
  3. 非定点元素(按照在HTML中出现的逐一排序)
  4. 定位元素(和她们的子元素)带着auto的z-index值(按照在HTML中出现的依次排序)
  5. 一定元素(和她俩的子元素)带着正z-index值(高的值被堆叠在低值的前头;相同值的要素根据在HTML中冒出的各样堆叠)

评释:定位元素带有负的z-index值被在一个储藏室上下文中先排序,那象征他们出现在有着其余因素的末端。正因如此,它使一个要素出现在投机父元素之后
成为可能,那在此从前常见是不可以的事。当然,那局限于它的父元素与它在同一个仓房上下文,并且不是那些堆栈上下文的根元素。一个伟人的例证如Nicolas
Gallagher的CSS不用图像下降阴影。

子孙元素拔取器
子元素接纳器

全局堆栈顺序

坚定的领悟了为何/哪天新的库房上下文形成,同时控制了同一个仓房上下文的堆栈顺序,现在让你来找出一个一定元素将应运而生在大局堆栈里的依次不是那么不好了吗?

防止不当的重中之重是力所能及察觉新的库房上下文曾几何时形成。若是您对一个元素设置了z-index值为十亿不过它没有在仓库顺序中前进移动,检查一下它的祖先树,看是不是它的父节点形成了储藏室上下文。即使是那样的话,你的z-index值即便有十亿也不会给您带来益处。

.new li{border:1px solid #ccc;} 后代所有因素【尤其哦】
.new > .title{color:red;} 子代元素 【只有一代】【少用】
<div class=”new”>
<div class=”title”>title</div>
<div class=”content”>
<li>集团创造</li>
</div>
</div>

包扎救治

回去往日的本来难点,我早就重建了那个HTML的布局,添加了一些诠释,每一个标签指明了它在库房里的一一。那几个顺序是假使最初的CSS。

<div><!-- 1 -->
  <!-- 6 -->
</div>
<div><!-- 2 -->
  <!-- 4 -->
</div>
<div><!-- 3 -->
  <!-- 5 -->
</div>

那是我们熟悉的,所以结果在我们的料想之中,但当大家添加opacity到第三个<div>,堆栈顺序像上边那样改变:

<div><!-- 1 -->
  <!-- 1.1 -->
</div>
<div><!-- 2 -->
  <!-- 4 -->
</div>
<div><!-- 3 -->
  <!-- 5 -->
</div>

span.red曾经的逐条是6,但现在改为1.1。我早已采纳“.”来标注一个新的上下文环境的形成。span.red现在是卓殊新的上下文的率先个元素。


在就好像更清楚了,关于为什么粉色盒子跑到其余盒子的末尾。原始的事例只含有五个堆栈上下文,根元素和变异span.red的非凡。当大家抬高
opacity到span.red的父节点上,形成了第多个堆栈上下文,结果显示在span.red上的z-index值只可以动用在分外新的库房上下文
中。因为第二个<div>(应用opacity的不胜)和它的小兄弟元素没有position或者z-index值的汇聚,他们的堆栈顺序是由
他们在HTML里的源顺序决定的,也就是说第四个<div>,和它的库房上下文里的持有因素被第四个和第多少个<div>元素分
离。

注:以上请在chrome浏览器下测试!

来源:至于z-index的那多少个事儿

div.box class=”box” 的 div
div#header id=”header”的div

任何html元素都有 width height padding margin border background

body{font:bold italic 24px 黑体;} 简写的花样
letter-spacing: 字间距
line-height:150% 行高1.5倍

padding:0px 0px 1px; 上 左右 下
单行文本上下居中li{height:30px;
line-height:30px;}
li{list-style-type:none; }

伪类接纳器 <a>
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}

a.a1:link{color:red;} [厉害哦]

<li><a>xx</a></li>
<li><a class=”a1″>xxxxx</a></li>

background-color
background-image
background-attachment 移动滚动条时,背景固定fix 依旧滚动 scroll

<style type=”text/css”>
body,div,li{padding:0; margin:0;}
ul,li{list-style:none;}
li{
padding-left:30px;
background-repeat:no-repeat;
background-image:url();
background-position:left center;} li背景图片水平左对齐 垂直居中对齐
</style>

行内元素 span a img 

行内元素的大大小小由内容决定,设置 width 和 height是看不到效果的

行内元素转块元素

<span style=”float:left;”></span> 变成了块元素

a span{display:block;} //行内元素转成块元素

div{display:inline;}
//块元素转行内元素

行内元素,经过什么样操作,可以变成“块元素”?
扭转、display:block、固定定位、相对定位

<span style=”float:right;”>右对齐
float元素不占空间,不占px

别的因素都足以变更 float
有着图片float:left; 只要宽度不够,就会自行换行,就有如下效果
<ul><li><img src=””/></li></ul>
图片1 图片2
图片3 图片4

p{width:580px; padding:20px 10px;} 宽就是600px了,添加padding margin
要减小width

每个div都定义高度
li{float:left;}
font-weight:bold;

<div class=”class1 class2″></div> 加四个样式

一行三个东西,一个float:left;一个float:right;

css定位
position: static(静态定位) fixed(固定定位) relative 相对稳定 absolute
相对定位
left 设置元素距离左侧多远
right top bottom

其余因素,默许是静态定位
定位定位:相对于浏览器窗口(在线QQ)
固定元素,脱离文档,不占空间,是”块元素“
周旋固定:是相对于”它原本的亲善“来举行的晃动,所占空间保留(Tmall图片新品标志)
position:relative;
right:-100px; //用负数

相对定位:相对于它的先世(上级依旧上上级,最后是<body>)定位,不占空间

组合使用
上司相对 position:relative;
实际那么些元素 position:absolute; top:-10px; right:-30px;

CSS HACK
实在解决不了包容性难题,可以尝试使用css hack
CSS HACK,针对不一致浏览器IE6 IE7 IE8
火狐,编辑分化的CSS代码的经过,就叫CSS HACK。
(1)CSS属性的HACK:
div{
background-color:red; //所有浏览器都支持 其他 呈现 red
*background-color:green; //ie6和IE7支持 ie7 显示 green
_background-color:blue; //IE6认识 最终 ie6 显示 blue

 

下面的css hack  未验证

CSS Hack的贯彻形式:

         (1)IE条件语句:只在IE9-有效

                   <!–[if IE]>
小于IE10的浏览器会看到此句<![endif]–>

                   <!–[if IE 6]>
IE6看到此句<![endif]–>

                   <!–[if lt IE 8]> 小于IE8的浏览器会看到此句
<![endif]–>

                   <!–[if lte IE 8]>
小于等于IE8的浏览器会看到此句 <![endif]–>

                   上述条件语句中可以放置任何CSS/HTML/JS语句。

         (2)选拔器前缀

                   <style>

                            .content{ }       
所有浏览器都能明白的接纳器

                            *html  .content{}                     
唯有IE6能明白的选择器

                            *+html     .content{}                  
唯有IE7能领略的拔取器

                   </style>

         (3)属性前缀

                   <style>

                            .content{

                                     -webkit-animation: anim1  3s;      

                                     -moz-animation: anim1  3s;

                                     -o-animation: anim1  3s;

                                     background: red;              
/*持有浏览器都能分辨*/

                                     *background:green;        
/*IE6/IE7能识别*/

                                     _background:blue;           
/*IE6/IE7能识别*/

                                     +background:yellow;       
/*IE能识别*/

                                     background: yellow\9\0;
/*IE9+能识别*亚洲必赢官网,/

                                     background: pink !important; 
/*IE6不可能辨认*/

}

                   </style>

css 优化

页面访问速度优化

         (0)硬件/网络优化

         (1)数据库优化

         (2)服务器优化

         (3)前端优化: HTML优化、CSS优化、JS优化

  CSS优化方案:

         优化原则:尽可能收缩HTTP请求数量;尽可能裁减每回请求的数据大小

         优化措施:

         (1)CSS
7-Ups:背景图滑动门、把过多的小背景图拼接为一副大图——百度“CSS
Pepsi-Colas在线”可以找到很多这么的工具

         (2)把CSS放到页面顶部,多用<link href=”x.css”/>代替@import
url(x.css)

         (3)防止使用CSS说明式

         (4)避免空的src和href值

         (5)巧用浏览器缓存,把CSS放在尽可能少的HTML外部文件

         (6)首页中尽量不要外部CSS

         (7)不要在HTML中缩放图像

        
(8)对JavaScript文件和CSS文件举行压缩(剔除空白/换行/注释等),减小文件大小。可利用类似YUI
Compressor等工具    Yahoo UI Libary

 

网站地图xml地图