层叠上下文

Posted on | In

层叠顺序

上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

装饰类的最下，布局类的属性 居中，内容顺序最高

一旦普通元素具有了层叠上下文，其层叠顺序就会变高

务必牢记的层叠准则

  • 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

  • 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

情况

  • 如果层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto可看成z:index:0级别；

  • 如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定。

大家知道为什么定位元素会层叠在普通元素的上面吗？

  • 其根本原因就在于，元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。

  • 而不支持z-index的层叠上下文元素天然z-index:auto级别，也就意味着，层叠上下文元素和定位元素是一个层叠顺序的，于是当他们发生层叠的时候，遵循的是“后来居上”准则。

层叠上下文的创建

皇亲国戚派：页面根元素天生具有层叠上下文，称之为“根层叠上下文”。

科考入选派：z-index值为数值的定位元素的传统层叠上下文。

其他当官途径：其他CSS3属性。

    1. display:flex|inline-flex与层叠上下文

      • 要满足两个条件才能形成层叠上下文：条件1是父级需要是display:flex或者display:inline-flex水平，条件2是子元素的z-index不是auto，必须是数值。此时，这个子元素为层叠上下文元素，没错，注意了，是子元素，不是flex父级元素

      • 会出现一种情况，有可能子元素设置一个z-index ，然后被div 盖上，解决办法给父元素的父元素也加上flex 属性

      • 在CSS2.1时代，z-index属性必须和定位元素一起使用才有作用，但是，在CSS3的世界里，非定位元素也能和z-index愉快地搞基





    1. opacity与层叠上下文

      • 上述flex 的为问题也可以给父元素加一个透明属性

        • 原因就是半透明元素具有层叠上下文，妹子图片的z-index:-1无法穿透，于是，在蓝色背景上面乖乖显示了。

    1. transform与层叠上下文

      • transform: rotate(15deg);应用了transform变换的元素同样具有菜单上下文。

    1. mix-blend-mode与层叠上下文

      • mix-blend-mode类似于PS中的混合模式，之前专门有文章介绍-“CSS3混合模式mix-blend-mode简介”。

      • 需要注意的是，目前，IE浏览器(包括IE14)还不支持mix-blend-mode，因此，要想看到妹子在背景色之上，请使用Chrome或FireFox。

    1. filter与层叠上下文

      • 同样具有菜单上下文。
    1. isolation:isolate与层叠上下文
    1. will-change与层叠上下文

层叠水平

决定了同一个层叠上下文中元素在z轴上的显示顺序

层叠上下文

。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

二、CSS3 will-change粉墨登场

浏览器往往是没有准备的，只能被动使用CPU去计算与重绘，由于没有事先准备，应付渲染够呛，于是掉帧，于是卡顿。而will-change则是真正的行为触发之前告诉浏览器：“浏览器同学，我待会儿就要变形了，你心理和生理上都准备准备”。于是乎，浏览器同学把GPU给拉上了，从容应对即将到来的变形。

auto
就跟width:auto一样，实际上没什么卵用，昨天嘛，估计就是用来重置其他比较屌的值。

scroll-position
告诉浏览器，我要开始翻滚了。

contents
告诉浏览器，内容要动画或变化了。


顾名思意，自定义的识别。非规范称呼，应该是MDN自己的称呼，以后可能会明确写入规范。比方说animation的名称，计数器counter-reset, counter-increment定义的名称等等。

上面展示了2个例子，一个是transform一个是opacity，都是CSS3动画常用属性。如果给定的属性是缩写，则所有缩写相关属性变化都会触发。同时不能是以下这些关键字值：unset, initial, inherit, will-change, auto, scroll-position, 或 contents.


可动画的一些特征值。比方说left, top, margin之类。移动端，非transform, opacity属性的动画性能都是低下的，所以都是建议避免使用left/top/margin之流进行唯一等。但是，如果你觉得自己是margin属性奶大的，非要使用之，试试加个will-change:margin说不定也会很流畅（移动端目前支持还不是很好）。

就目前而言，使用的基本上都是：

.example {
will-change: transform;
}

CSS3 will-change使用注意事项

注意事项

  • 如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调，于是（示意，不要在意细节）：

  • 平时，我们一般地CSS动画，平常的渲染处理，手机都是可以比较流畅的。完全没有必要以牺牲其他东西来实现。手机上的电量弥足珍贵。如果发现(尤其Android)机子h5页面不流畅，找找看是不是动画属性使用问题，或者非可视动画层没隐藏等等原因。