著名的7阶层叠水平（stacking level）

  1. 层叠上下文 background/border
  2. 负z-index
  3. block块状水平盒子：正常流失布局，非inline-block，无position定位（static除外）
  4. float浮动盒子：无position定位（static除外）的float浮动元素
  5. inline/inline-block水平盒子：正常流式布局，非inline-block
  6. z-index:auto或z-index:0
  7. 正z-index

详细参考：http://www.cnblogs.com/coco1s/p/5899089.html

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/?utm_source=tuicool&utm_medium=referral

CSS 7阶层叠水平的更多相关文章

  1. CSS中层叠和CSS的7阶层叠水平（上篇）

    今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平 在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平 这个东西就是 ...

  2. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  3. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  4. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  5. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  6. css定位“十字架“之水平垂直居中

    1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML P ...

  7. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  8. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  9. css项目列表如何水平放置

    列表项目默认分行排列,那么将列表项设置浮动就可以实现水平放置 1 li{float:left;} 示例如下: 创建Html元素 1 2 3 4 5 6 <ul>     <li> ...

随机推荐

  1. iOS 浅复制和深复制的深层理解，含示例

    转载:https://www.zybuluo.com/MicroCai/note/50592 版权归 @MicroCai 所有 以下是正文: 浅复制就是指针拷贝:深复制就是内容拷贝. 集合的浅复制 ( ...

  2. Activity往另外一个Activity传值，Fragment获取另外一个Activity里面的值。

    在oneActivity中实现跳转到MainActivity //intent 用来跳转另外一个MainActivity,bundle传值到MainActivity         Intent Ma ...

  3. Nodejs安装

    1 下载NodeJS   https://nodejs.org/download/ 最新版下载地址 # wget https://nodejs.org/dist/v0.12.7/node-v0.12. ...

  4. 表单元素——checkbox样式美化

    一.背景 设计狮童鞋总是会设计各种高大上的效果图,比如下面这个土豪金的效果. 该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框,打钩时是一个金色的对勾.接下来说说怎样实现该效果. 二.解 ...

  5. 超简单——自己搭建ftp服务器

    自己搭建ftp服务器 之所以没选择serv-u,一是因为收费,虽说网上有破解版,但是使用过程中发现破解版很不稳定,经常异常死掉,随后改选用免费的filezilla. 1软件获取 从百度搜索 FileZ ...

  6. [LeetCode] Rank Scores 分数排行

    Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...

  7. c#枚举使用详解

    简介 1. 枚举(enum type)通常用来表示一组常量.由于枚举是强类型的,这在编程中给我们提供了极大的方便. 2. 枚举的定义: public enum Sex { 男 = 0, 女 = 1 } ...

  8. 开发 ASP.NET vNext 续篇：云优化的概念、Entity Framework 7.0、简单吞吐量压力测试

    继续上一篇<开发 ASP.NET vNext 初步总结(使用Visual Studio 2014 CTP1)>之后, 关于云优化和版本控制: 我本想做一下MAC和LINUX的self-ho ...

  9. REDIS持久化报错失败

    redis log报错: [7666] 15 Jan 00:22:36.028 # Error moving temp DB file on the final destination: Invali ...

  10. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...