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
#index无人问津的工作,index堆叠规则。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

挑战:

品尝使革命<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
Sprites:背景图滑动门、把广大的小背景图拼接为一副大图——百度“CSS
百事可乐s在线”可以找到很多如此的工具

         (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地图