金沙js333娱乐场z-index堆积规则,z-index积聚

问题

在底下的HTML大家写了3<div>要素,然后每种<div>要素里面都有四个元素,每个要素都有个背景观,并且采纳absolute恒定,为了能更掌握地收看z-index的功用,大家写了一些别样的样式。第2个`元素的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的艾德it按钮去尝尝一下吗。假让你不能够成就,那就接着看下来。

五、stacking context

为何上个例子相月素的积聚顺序受z-index的熏陶呢?因为这几个成分有个别越发的特性触发它们生活堆成堆上下文(stacking
context)。

主题素材来了,什么样的因素会转变聚成堆上下文呢?符合上边规则之壹的:

  • 根元素(即HTML元素)
  • 已牢固成分(即绝对定位或相对固化)并且z-index不是私下认可的auto。
  • a flex item with a z-index value other than “auto”,
  • 要素opacity属性不为一(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,#三中又含有着#4,#5,#6。

Root(HTML)

  • DIV #1
  • DIV #2
  • DIV #3
    • DIV #4
    • DIV #5
    • DIV #6

金沙js333娱乐场 1<!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

效果:

金沙js333娱乐场 2 

 分析一下:

1、因为安装了div {opacity: 0.7; position:
relative;},所以#1~#陆的z-index都以实惠的。

2、为什么#4的z-index比#一高,不过却在#1下面?因为#肆的z-index尽管值大,但它的成效域在包蕴块#3内,而#壹的z-index的成效域在html内,和#3同属html,而#3的z-index小于#1。

3、为什么#2的z-index值比#伍的大,还在上面?同上。

4、#三的z-index是4,但该值和#4,#5,#陆的z-index不抱有可比性,它们不在一个上下文景况。

5、如何轻松的论断五个成分的积聚顺序?

z-index对聚成堆顺序的决定类似于排版时候一大章下多少个小节的标准,或许版本号中1个大的版本号跟着小版本号。

Root-z-index值为暗中同意auto,即0

  • DIV #2 – z-index 值为2
  • DIV #3 – z-index 值为4
    • DIV #伍 – z-index值为 一,其父成分z-index值 四,所以最终值为四.一
    • DIV #陆 – z-index值为 三,其父成分z-index值 四,所以最终值为四.叁
    • DIV #4 – z-index值为 6,其父元素z-index值 四,所以最后值为四.6
  • DIV #1 – z-index 值为5

想看越多例子,可参考小说最终的财富链接。

用饭馆顺序决定三个成分的岗位

事实上,为二个页面上的有所因素决定全局仓库顺序(包含边界、背景、文本节点、等等)是独步天下复杂的,并且远远超越了本文讲述的限量(再一遍,参考文书档案)。可是大家最大的目的,正是主导精通这么些顺序,它亦可在非常短一段时间内扶助大家巩固CSS开垦的可预测性。所以,让大家打破顺序,分解为单身的旅社上下文。

推荐阅读

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

    1 赞 3 收藏
    评论

金沙js333娱乐场 3

一、z-index

z-index用来调控成分重叠时堆积顺序。

适用于:已经固化的元素(即position:relative/absolute/fixed)。

一般精晓正是数值越高越靠上,好像很简短,不过当z-index应用于复杂的HTML成分档次结构,其作为容许很难领悟以致不可预测。因为z-index的堆放规则很复杂,上边1一道来。

首先解释3个名词:

stacking
context:翻译正是“堆放上下文”。每种元素仅属于3个堆集上下文,成分的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的状态初步将,安分守己。

问题:

在 接下来的HTML里
有几个<div>成分,并且每一种<div>里带有1个<span>成分。每一种<span>被分别给定3个背景颜色:红、绿、蓝。每种<span>被停放到文书档案的左上角相近,部分重叠着其他的<span>成分,这样你就能够知见哪些是被堆成堆在后边。第3个<span>有两个z-index的值为壹,而其余四个从未任
何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;
}

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

金沙js333娱乐场 4

 

 

堆放顺序

z-index看起来极粗略,z-index值大的要素在z-index值小的因素后边,对吗?但实在那只是z-index的1有的用法。繁多程序员都感到很简短,未有花太多时光去认真读书规则。

HTML中的每一成分都是在别的因素的眼下或许前面。那是明白的堆成堆顺序(Stacking
Order),这条规则在w3c标准内部说的很驾驭,但自个儿前面提到过了,超越二分之一技术员并不真的通晓。

假若未有涉及z-indexposition属性的话,那规则很简短,堆放顺序便是因素在HTML中冒出的逐条。(当然假如您对行内成分接纳负margin的话,莫不情状会复杂一些。)

加上position性子的话,便是装有定位了得成分在尚未被固化的要素前面。(1个成分被定位的意思这里指的是它有二个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成分的背景和境界未有被扭转成分影响,可是成分中的内容受影响(浮动布局本性)

举例:

金沙js333娱乐场 5<!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

金沙js333娱乐场 6

分析:

#4是符合规律流中国和亚洲稳定的成分,所以先被渲染,在最尾巴部分。

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

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

 金沙js333娱乐场 7

商旅上下文

1组具有共同双亲的要素,遵照货仓顺序一齐上前或向后活动构成了所谓的宾馆上下文。充裕掌握饭店上下文是实在主宰z-index和库房顺序职业原理的基本点。


三个储藏室上下文都有一个HTML成分作为它的根成分。当二个新的饭店上下文在三个因素上变成,那么那么些库房上下文仲限制全数的子成分以商旅的顺序存款和储蓄在一个专门的地点。那表示要是1个因素被含有在处于尾部仓库顺序的库房上下文中,那么就不曾章程先出现于任何处于更加高的仓库顺序的例外货仓上下文成分,固然z-index值是拾亿也十一分!

当今,货仓上下文有二种办法能够在2个因素上变成:

  • 当1个因素是文书档案的根元素时(<html>成分)
  • 当二个因素有三个position值而不是static,有四个z-index值而不是auto
  • 当叁个因素有三个opacity值小于1

前二种变异商旅上下文的法子具备一点都不小要思并且被大面积Web开采者所明白(固然他们不明白那个被叫作什么)。第两种办法(opacity)大约向来没在w叁c表明文书档案之外被谈起过。

没人告诉您至于z-index的一部分事

2015/07/23 · CSS ·
z-index

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

关于z-index的主题素材是多数程序猿都不明白它是何许起效果的。说到来轻易,可是繁多人并未花时间去看标准,那往往会照成严重的后果。

你不信?那就联手来看看上面包车型客车难题。

z-index积聚规则,z-index堆积

缓慢解决方案:

以此化解措施是在首先个<div>里(铁锈棕<span>的父节点)增多二个低于一的opacity属性值。上边正是被加上的CSS的事例:

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

假如你未来很振撼,可是依旧百思不得其解,并且不注重opacity能决定哪些元素堆在前方,那么是时候看看关于体制的文书档案了。当第贰遍在那个难题上被搅扰时自身一样备受惊。

梦想接下去的剧情约财富够让您对这一个标题更了然些。

发表评论

电子邮件地址不会被公开。 必填项已用*标注