>

中的层叠上下文初探

- 编辑:至尊游戏网站 -

中的层叠上下文初探

CSS3 中的层叠上下文初探

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

原文出处: HaoyCn   

前言:关于层叠上下文,笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理(表打我,等我校招拿到 offer 了我就读好伐 T_T)。一直听说 CSS3 里的层叠上下文有新情况,但没找到很好的参考资料,故自己实战一把。鉴于笔者水平有限,如有任何遗漏或者错误,则恳请读者斧正。

深入CSS属性(九):z-index,深入css属性z-index

如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,本文不去讲述基本的API如何使用,而是去更深入的了解z-index是如何工作的,使用z-index的时候有哪些问题,以及z-index在日常开发中的使用。 下面我们通过一个例子来引入今天的正文,代码示例:

<style type="text/css">
 .red, .green, .blue {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
 }
 .red {
  background-color: red;
  z-index: 1;
 }
 .green {
  background-color: green;
  top: 70px;
  left: 70px;
 }
 .blue {
  background-color: blue;
  top: 140px;
  left: 140px;
 }
</style>  
<div>
 Red box
</div>
<div>
 Green box
</div>
<div>
 Blue box
</div>

如下图: 图片 1

上述代码通俗易懂,下面有个问题请大家思考: 在遵循下述规则的情况下,如何使用红色span元素在green和blue元素后面?

1) 不能以任何方式更改html标记;

2) 不能增加或改变任何元素的z-index属性;

3) 不恩增加或改变任何元素的position属性;

请大家思考,这个问题改如何解决?说明其原因?

1 CSS2.1 中规定的层叠上下文图片 2

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 新环境下,层叠上下文的新变化。

----------------------------------- 分割线

2 CSS3 带来的变化

总的来说变化可以归为两点,我们之后一一探讨:

  1. CSS3 中许多属性会创建局部层叠上下文
  2. tranform 属性改变绝对定位子元素的包含块

一、z-index 黄金法则及stack context

1) 一个box和它的父亲有相同的堆叠级别(stack level),除非该box被通过z-index属性赋予了不同的stack level;

2) z-index属性只适应于position属性为relative、absolute、fixed的元素对象;

3) 给一个被定位(positioned)元素设置小于1的opacity属性值,意味着创建了一个堆叠上下文(stack context),就像给该元素增加了一个z-index值;

4) 对于一个被positioned box,如果指定了z-index属性,意味着:

->该box的stack level 在当前的stack context中;

->该box建立了个本地stack context;

5) 如果box没有指定z-index,元素将被按下面的顺序堆叠(stacked)(从后到前):

-> 正常流中的boxes,根据在源代码中的序列;

-> 浮动boxes;

-> computed后display属性值为inline/inline-block/inline-table的boxes;

-> positioned boxes 和boxes 设置opacity值小于1,根据在源代码中的序列;

 

 

因此,当我们给一个positioned元素设置了z-index时,我们做了两件事:

1) 该元素与在它前面或者后面的元素共享着相同的stack context,这也就是我们改变z-index的值,元素会移动其他元素前后者后的原因。

2) 为该元素内的任何元素创建了一个新的stack context,一旦你创建了一个stack context,内部的任何有(stack context)的任何层都会停留在这个stack context。 通过上述的黄金法则,也许你已经知道上面那个问题的答案了。在黄金法则里,我们提到了个新名词“stack context”,下面我们通过一个实例来介绍它:

<!DOCTYPE html>
<html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>z-index example</title>
</head>
<body>
<h1>Header</h1>  
<p>I am paragraph. <em> I am em</em></p>   
</body>
</html>

一个很特殊的情况是,在一个document中,没有任何定位,document有且只有一个堆叠环境

  • 通过HTML创建。 下面我们给上例添加如下样式:

    h1, p {
     position: relative;
    } 
    h1 {
     z-index: 2;
    }
    p {
     z-index: 1;
    }
    

在这种情况下,h1,p都创建了一个stack context,这两个stack context都在document的stack context内。增加样式后h1在p元素之上。如果我们给em元素增加如下样式结果又会怎样:

  h1, p, em {
   position: relative;
  } 
  h1 {
   z-index: 2;
   background-color: #f0f;
  }
  p {
   z-index: 1;
   background-color: #00f;
   line-height: 40px;
  }
  em {
   z-index: 1;
   background-color: #f00;
  }

增加此样式后em创建了stack context,由于em的z-index属性,它的内部的text比p标签中的其它text更接近用户。因为它是在p的stack context内部,它是一直比h1中的text低的。 注意:如果你增加z-index的值,是不能使用em位于h1之上的。如果你想一个context的元素位于另一个context中的元素之上,你必须提升整个context或者设置它们为相同的context。 下面是两种解决方案: 方案一:

  h1, p, em {
   position: relative;
  } 
  h1 {
   z-index: 2;
   background-color: #f0f;
  }
  p {
   /* raise the entire context,p and em 都在h1 之上了*/
   z-index: 3;
   background-color: #00f;
   line-height: 40px;
   margin-top: -40px;
  }
  em {
   z-index: 1;
   background-color: #f00;
  }

方案二:

  h1, p, em {
   position: relative;
  } 
  h1 {
   z-index: 2;
   background-color: #f0f;
  }
  p {
   background-color: #00f;
   line-height: 40px;
   margin-top: -40px;
  }
  em {
   /*  put them into the same context */
   z-index: 2;
   background-color: #f00;
  }

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

以上列表译自:

,提醒广大读者,别看中文版,因为中文版并非实时跟进更新的,且翻译不太准确

二、创建stack context及注意事项

那么创建stack context的方式有哪些?

1) When an element is the root element of a document (theelement)

2) When an element has a position value other than static and a z-index value other than auto

3) When an element has an opacity value less than 1

Update: In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

 

In WebKit, styling a box with position:fixed or -webkit-overflow-scrolling:touch implicitly creates a stacking context, just like adding a z-index value.

Also, be aware of these CSS3 “triggers”:

transform != none

transform-style: preserve-3d

filter != none clip-path, mask

Lastly, even though a relatively positioned element without a z-index set does not establish a stacking context… A common IE bug, often seen in drop-down menus, is that any relatively positioned element that has haslayout set to true establishes a stacking context. One may visualize this bug by setting [A] and [B] to position:relative, while [a] gets position:relative; z-index:1. Now, dragging [A] under [B] hides [a] - in Internet Explorer, that is. Any positioned child with a z-index is caught by this wrong stacking context of its parent.

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在某些浏览器中的问题

1) IE6中的 select元素是一个窗口控件,所以它总是出现在层叠顺序的顶部而不会顾及到自然层叠顺序、position属性或者是z-index。可以在div元素上添加一个iframe设置为position:absolute,并设置div的z-index比iframe的高。

2) 因父容器(元素)被定位的缘故,IE6/7会错误的对其stacking context进行重置。

3) 在Firefox2版本中,一个负的z-index值会使元素位于stacking context的后面,而不是位于公认的背景和边框这样的元素stacking context之前。 本文到此结束,最后附上本文开始时提出的问题的答案:

/* add this */
div:first-child {
opacity: .99;
}

感谢您的阅读,文中不妥之处,还望批评指正。

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

图片 3

四、参考链接:

Find out how elements stack and start using low z-index values

The Z-Index CSS Property: A Comprehensive Look

Elaborate description of Stacking Contexts

Overlapping And ZIndex

CSS/Properties/z-index

Understanding CSS z-index(MDN)

What No One Told You About Z-Index

测试Demo:

 

原载于: Benjamin 
本文链接:  
如需转载请以链接形式注明原载或原文地址。

CSS中z-index属性具体是什?

层相对于屏幕纵深方向的顺序。你用几个层叠在一起就可看出它的含义。
如以下是相关测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">

<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<div style="position:relative; width:150px; height:100px; z-index:2; background-color:Red;"></div>
<div style="position:relative; width:150px; height:100px; z-index:1; top:-20px; background-color:Blue;"></div>
</body>
</html>

说明:
第一个DIV模块中,我们定义了宽度为150,高度为100,背景色为红色,z-index:2 inherit;此DIV的级别为2
第二个DIV模块中,我们定义了宽度亦为150,高度为100,背景色为蓝色,z-index:1 inherit;此DIV级别为1,top:-20px垂直向上-20象素.
2>1
上面的DIV模块级别高于下面的DIV模版级别.所以,我们在position:relative;中可以体会到是上一层遮住了下一层.并且遮住了我们设定的20象素的区域.  

CSS样式中z-index属性

定义和用法z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!  

如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元...

本文由IT-综合发布,转载请注明来源:中的层叠上下文初探