层叠水平（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 零.世间的道 ...
随机推荐
- Sql 使用备份还是使用脚本
对sql使用并不熟悉,但是通过项目接触总结出的经验 什么样的场景下选择使用脚本或者备份: 1:当需要创建相关的库的时候使用脚本 2:当需要还原至某个时间点的状态的或者前进至某个版本的数据库的时候就使用 ...
- Easier Done Than Said?
Problem Description Password security is a tricky thing. Users prefer simple passwords that are easy ...
- solr中竞价排名实现
转载:http://mxsfengg.iteye.com/blog/308335 通常,lucene只返回与用户查询相关的文档,搜索的结果,跟lucene对文档评分有关.而在现实的查询中,我们有些时候 ...
- 【开源项目8】Android开源项目分类汇总【畜生级别】
欢迎大家推荐好的Android开源项目,可直接Commit或在 收集&提交页 中告诉我,欢迎Star.Fork :) 微博:Trinea 主页:www.trinea.cn 邮箱:t ...
- (四)u-boot2013.01.01 for TQ210：《mkconfig分析》
config.mk主要功能是配置单板信息和编译环境,将会被u-boot的makefile所调用,本文仍然侧重于句法分析. ####################################### ...
- VMware系统运维（七）vCenter Inventory Server安装
1.vCenter Inventory Server安装即vCenter 清单服务 2.下一步 3.接受协议,下一步 4.选择安装位置,下一步 5.设置域名,注意在安装之前一定要加域,嘻嘻. 6.设置 ...
- Sqlite3笔记
.tables 查看表.databases 创建数据库alter table 表名 RENAME TO 新表名ALTER TABLE 表名 add column 列名 datatype [DEFAUL ...
- IntelliJ IDEA 14.0.2破解注册码文件（2015年06月08日）
Java文件代码: import java.math.BigInteger;import java.util.Date;import java.util.Random;import java.util ...
- jQuery 显示加载更多(节流) 实现预加载
(function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...
- SlickOne -- 基于Dapper, Mvc和WebAPI 的快速开发框架
前言:在两年前,项目组推出了基于Dapper,Mvc和WebApi的快速开发框架,随着后续Slickflow产品的实践和应用,今再次对SlickOne项目做以回顾和总结.其目的是精简,持续改进,保持重 ...