普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。

诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。

什么是层叠顺序

border/background一般为装饰属性,而浮动和块状元素一般用作布局,而内联元素都是内容。网页中最重要的是什么?当然是内容了哈,对不对!

因此,一定要让内容的层叠顺序相当高,当发生层叠是很好,重要的文字啊图片内容可以优先暴露在屏幕上

  1. 位于最低水平的border/background指的是层叠上下文元素的边框和背景色。每一个层叠顺序规则适用于一个完整的层叠上下文元素。
  2. 原图没有呈现inline-block的层叠顺序,实际上,inline-block和inline水平元素是同等level级别。
  3. z-index:0实际上和z-index:auto单纯从层叠水平上看,是可以看成是一样的。注意这里的措辞——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域有着根本性的差异。
  4. ③. CSS3与新时代的层叠上下文
    CSS3的出现除了带来了新属性,同时还对过去的很多规则发出了挑战。例如,CSS3 transform对overflow隐藏对position:fixed定位的影响等。而这里,层叠上下文这一块的影响要更加广泛与显著。

    如下:

    1. z-index值不为autoflex项(父元素display:flex|inline-flex).
    2. 元素的opacity值不是1.
    3. 元素的transform值不是none.
    4. 元素mix-blend-mode值不是normal.
    5. 元素的filter值不是none.
    6. 元素的isolation值是isolate.
    7. will-change指定的属性值为上面任意一个。
    8. 元素的-webkit-overflow-scrolling设为touch.

摘取自:http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

css层叠上下文和层叠顺序的更多相关文章

  1. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  2. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  3. 关于css的层叠上下文和层叠顺序问题

    关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...

  4. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  5. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

  6. css 层叠上下文和层叠顺序

    层叠上下文是css中的一个三维概念,拥有层叠上下文的元素在z轴上比普通元素要高,而且其内部的所有内容是自成体系的,其后代都是在它的层叠顺序中 哪些元素拥有层叠上下文 1.根元素,也就是html默认拥有 ...

  7. css之层叠上下文和层叠顺序

    大家在写网页的时候会不会经常遇到莫名奇妙的样式问题,比如谁覆盖了谁.也找不出原因,为什么z-index高的却没有覆盖掉z-index低的元素呢? 带着这些疑问.我做了个小实验.代码如下: <st ...

  8. 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...

  9. 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠

    写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...

随机推荐

  1. Python()- 面向对象的组合用法

    面向对象的组合用法 一个类中以另一个类的对象作为数据属性(一个类中引用另一个类的对象)一种 "有" 的关系: 比如:定义 1个人类 & 1个武器类 然后 张三 有 枪 李四 ...

  2. CodeForces 592D Super M

    先把没用的边去掉,求出包含m个点的最小树.然后求出最小树的直径就可以得到答案了. #include <cstdio> #include <cstring> #include & ...

  3. Anagrams(hash表)

    Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...

  4. pcre7.0在vc6.0编译

    (0)从http://gnuwin32.sourceforge.net/packages/pcre.htm  (pcre windows)下下载最新的windows平台源代码pcre-7.0-src. ...

  5. Java子类重写父类方法注意问题收集(转)

    子类不能重写父类的静态方法,私有方法.即使你看到子类中存在貌似是重写的父类的静态方法或者私有方法,编译是没有问题的,但那其实是你重新又定义的方法,不是重写.具体有关重写父类方法的规则如下: 重写规则之 ...

  6. 黑黛增发罗林川:如何三年开1000家连锁店?_深度案例_i黑马

    黑黛增发罗林川:如何三年开1000家连锁店?_深度案例_i黑马 黑黛增发

  7. ArcGIS Engine 中的多线程使用

    转自原文ArcGIS Engine 中的多线程使用 一直都想写写AE中多线程的使用,但一直苦于没有时间,终于在中秋假期闲了下来.呵呵,闲话不说了,进入正题! 大家都了解到ArcGIS中处理大数据量时速 ...

  8. FM算法及FFM算法

    转自:http://tech.meituan.com/deep-understanding-of-ffm-principles-and-practices.html http://blog.csdn. ...

  9. 【Nginx】Nginx基础架构

    调用HTTP模块的流程: Worker进程会在一个for循环语句中反复调用事件模块检测网络事件.当事件模块检测到某个客户端发起的TCP请求时(接收到SYN包),将会为它建立TCP连接,成功建立连接后根 ...

  10. DWR(AJAX)+Highcharts绘制曲线图,饼图

    基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...