快捷搜索:
来自 新京葡娱乐场网址 2019-08-18 11:58 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

没人告诉你关于z,index积聚法则

没人告诉你至于z-index的一些事

2015/07/23 · CSS · z-index

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

关于z-index的标题是繁多程序猿都不领悟它是怎么着起效果的。聊到来轻便,然而超越四分之二人并从未花时间去看标准,那往往会照成严重的结局。

您不信?那就伙同来拜谒下边包车型客车主题素材。

z-index堆积准绳,z-index堆集

问题

在下边包车型地铁HTML大家写了3<div>要素,然后每一个<div>要素里面皆有三个元素,每个要素都有个背景象,并且采纳absolute恒定,为了能更明了地收看z-index的效果与利益,我们写了有些另外的样式。第3个`元素的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的场馆初步将,安分守己。

消除方案

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查看清晰效果。

堆放顺序

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元素的背景和境界未有被转移成分影响,但是成分中的内容受影响(浮动布局天性)

举例:

图片 3<!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

图片 4

分析:

#4是平常流中非定点的成分,所以先被渲染,在最尾部。

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

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

 图片 5

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:没人告诉你关于z,index积聚法则

关键词: