著名的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. SQL Server 自动化运维系列

    本系列为SQL SERVER自动化运维的一些操作技巧点,所有内容都是根据日常运维过程中最经常遇到的问题,并为此形成了一些自动化运维的方式,皆为原创.... 供部分DBA和开发人员浏览借鉴,所应用平台基 ...

  2. WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

  3. MYSQL 基本SQL语句

    复制表结构 CREATE TABLE 新表 SELECT * FROM 旧表 where 1=2 复制表结构和数据CREATE TABLE 新表 SELECT * FROM 旧表 查询重复数据: se ...

  4. 理解Docker（5）：Docker 网络

    本系列文章将介绍 Docker的相关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 ...

  5. 破解 Windows 下Markdown 编辑器 MarkdownPad 2

    MarkdownPad 是 Windows 平台下一款优秀的 Markdown 编辑器,本文简单介绍 Markdown 以及使用一种方法破解 MarkdownPad 使其升级到专业版.该方法仅限于教育 ...

  6. SVN提交代码的规范

       协同开发中SVN的使用规范 先更新,再提交 SVN更新的原则是要随时更新,随时提交.当完成了一个小功能,能够通过编译并且自己测试之后,谨慎地提交. 如果在修改的期间别人也更改了svn的对应文件, ...

  7. [LeetCode] LFU Cache 最近最不常用页面置换缓存器

    Design and implement a data structure for Least Frequently Used (LFU) cache. It should support the f ...

  8. [LeetCode] Power of Two 判断2的次方数

    Given an integer, write a function to determine if it is a power of two. Hint: Could you solve it in ...

  9. Node中的定时器详解

    在大多数的业务中,我们都会有一些需求,例如几秒钟实现网页的跳转,几分钟对于后台数据进行清理,node与javascript都具有将代码延迟一段时间的能力.在node中可以使用三种方式实现定时功能:超时 ...

  10. SpringMVC注解汇总(一)-定义

    本文根据开涛哥学习SpringMVC汇总而成,方便更好查阅! 网址:http://jinnianshilongnian.iteye.com/blog/1752171 注解式控制器简介 @Control ...