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

诸位千万不要把层叠水平和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. Mysql的常见几种错误:1045,1044

    Mysql的常见几种错误: 一.在进入 mysql 数据库时出错   # mysql -u root -p Enter password: ERROR 1045 (28000): Access den ...

  2. centos下wget时提示unable to resolve host address ...

    网络正常的情况,可以查看/etc/resolv.conf [root@localhost ~]# more /etc/resolv.conf # Generated by NetworkManager ...

  3. 给你两个字符串str1,str2,找出str2在str1中的位置

    如题 题目参考链接: http://blog.csdn.net/hxz_qlh/article/details/14110221 代码来自非原创 #include <iostream> # ...

  4. python学习之-- 事件驱动模型

    目前主流的网络驱动模型:事件驱动模型 事件驱动模型:也属于生产者/消费者结构,通过一个队列,保存生产者触发的事件,队列另一头是一个循环从队列里不断的提取事件.大致流程如下:1:首先生成一个事件消息队列 ...

  5. 牛客网 牛客网暑期ACM多校训练营(第三场)E KMP

    链接:https://www.nowcoder.com/acm/contest/141/E 题目描述 Eddy likes to play with string which is a sequenc ...

  6. [Bzoj1051][HAOI2006]受欢迎的牛(缩环)

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6676  Solved: 3502[Submit][Sta ...

  7. npm Error: Cannot find module 'proto-list'

    Error: Cannot find module 'proto-list' at Function.Module._resolveFilename (module.js:338:15) at Fun ...

  8. 设置eclipse默认用户名

    在使用Eclipse自动生成注释时,用户名总会被设置成Windows的登陆用户名.但大多数时候Windows用户名并不是我们写到注释里的用户名. 为了不想一个文件一个文件地修改,可以在最初时就设设置好 ...

  9. java的反射机制和javassist、asm

    1.java的反射机制,可以帮助我们在运行的时候获取我们引用的java类相关的信息,包括类的名字.所包含的方法名字.方法参数等等 2.javassit这个jar包,大概看了下,更厉害,它可以直接操作字 ...

  10. 如何在Win7 x64上的配置32位的PostgreSQL ODBC数据源

    在Win7 x64下安装最新版的PostgreSQL 9.x 后,从其官网下载最新的 ODBC驱动,分为普通的32位和64位版本,正常安装后,从已安装软件列表里可以看到两个版本的驱动都已经正确显示出来 ...