层叠水平（stacking level)
运用上图的逻辑，上面的题目就迎刃而解，inline-blcok 的 stacking level 比之 float 要高，所以无论 DOM 的先后顺序都堆叠在上面。
不过上面图示的说法有一些不准确，按照 W3官方 的说法，准确的 7 层为：
the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).
稍微翻译一下：
形成堆叠上下文环境的元素的背景与边框
拥有负
z-index的子堆叠上下文元素 （负的越高越堆叠层级越低）正常流式布局，非
inline-block，无position定位（static除外）的子元素无
position定位（static除外）的 float 浮动元素正常流式布局，
inline-block元素，无position定位（static除外）的子元素（包括 display:table 和 display:inline ）拥有
z-index:0的子堆叠上下文元素拥有正
z-index:的子堆叠上下文元素（正的越低越堆叠层级越低）
层叠水平（stacking level)的更多相关文章
- 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠
写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...
- 层叠上下文 Stacking Context
层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...
- CSS层级关系 学习笔记
CSS 文档流 格式化上下文 Formatting Context 即初始元素定义的环境 块格式化上下文 Block Formatting Context BFC 行内格式化上下文 ...
- 带大家认识CSS层叠上下文/层叠等级的区别和意义
什么是“层叠上下文” 层叠上下文(stacking context),是HTML中一个三维的概念.在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴.一般情 ...
- 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- 为什么我写的z-index不生效？
前言 相信大家在工作中都遇到过这样一些奇怪的问题: 1.为什么我写的z-index没有生效? 2.为什么z-index大的元素却没有盖住z-index小的元素? 3.如何让父元素盖住子元素呢? 以上这 ...
- 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- CSS 7阶层叠水平
著名的7阶层叠水平(stacking level) 层叠上下文 background/border 负z-index block块状水平盒子:正常流失布局,非inline-block,无positio ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
随机推荐
- 聊聊 Xcode 项目文件中的 project.pbxproj
project.pbxproj 文件被包含于 Xcode 工程文件 *.xcodeproj 之中,存储着 Xcode 工程的各项配置参数.它本质上是一种旧风格的 Property List 文件,历史 ...
- 02.Java多线程并发库API使用
1. 传统线程技术回顾 继承线程与实现Runnable的差异?为什么那么多人都采取第二种方式? 因为第二种方式更符合面向对象的思维方式.创建一个线程,线程要运行代码,而运行的代码都封装到 ...
- 【Mood-8】IT男！五更天！
男人从毕业到30岁之间所承受的叠加的压力,赡养父母.结婚生子.升职加薪.工作压力.生活质量,这些东西可以压得我们喘不过起来,也成为我们成长的动力, 我们累,但不说累,我们闷着头做事儿,不张扬,但每个都 ...
- leetcode 题解Merge Two Sorted Lists（有序链表归并）
题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...
- 重构10-Extract Method（提取方法）
我们要介绍的重构是提取方法.这个重构极其简单但却大有裨益.首先,将逻辑置于命名良好的方法内有助于提高代码的可读性.当方法的名称可以很好地描述这部分代码的功能时,可以有效地减少其他开发者的研究时间.假设 ...
- web 分类 和使用Dreamweaver
1.iE 2.火狐的fox 3.谷歌的Chrome 在编写的代码要符合W3c统一的国际标准 二:使用Dreamweaver: Dreamweaver只能用辅助,生成的代码要修改,…… ———编写的代码 ...
- Sharepoint 2013 安装部署系列篇 第一篇 -- 系统集群安装
这部分讲述怎样配置两台服务器作为sql集群. 准备 *你需要两个网卡在每台服务器上,一个是共有,另一个是私有的(heartbreak通信)*共享存储如SAN存储需要至少如下配置,并且需要连接到每台节点 ...
- 第一个项目--用bootstrap实现美工设计的首页
主要介绍在首页实现中用到bootstrap实现效果的地方. 实现如下的效果: <li> <div role="group" style="padding ...
- MongoDB - MongoDB CRUD Operations
CRUD operations create, read, update, and delete documents. Create Operations Create or insert opera ...
- C/S打包（图文）
最近几天接触到了关于C/S打包这块. 由于自己当时遇到了很多疑点,所以特意总结一下: 1.创建Project: 2.当创建Ok后会出现如下页面,左侧3个文件夹,第一个是放置程序文件(只需要放入.exe ...