来自 前端知识 2019-11-21 21:28 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

中的层叠上下文初探

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

以上列表译自:

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

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

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

澳门金莎娱乐手机版 1

二、创建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 CSS3 带来的变化

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

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

四、参考链接:

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 
本文链接:  
如需转载请以链接形式注明原载或原文地址。

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 黄金法则及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;
  }

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:中的层叠上下文初探

关键词: