大家在写网页的时候会不会经常遇到莫名奇妙的样式问题，比如谁覆盖了谁。也找不出原因，为什么z-index高的却没有覆盖掉z-index低的元素呢？

带着这些疑问。我做了个小实验。代码如下：

<style>

    .father-green {

        width:500px;

        height:300px;

        background-color:green;

    }

    .son-red {

        width:200px;

        height:100px;

        background-color:red;

        display:inline-block;

    }

    .subson-yellow {

        height:50px;

        width:200px;

        background-color: yellow;

    }

    .son-purple {

        width: 200px;

        height:100px;

        background-color:purple;

        display:inline-block;

        margin-left:-50px;

    }

    .mather-pink {

        width: 300px;

        height:100px;

        background-color:pink;

    }

    .daughter-blue {

        width:100px;

        height:50px;

        background-color:blue;

        margin-top:-20px;

    }

</style>

<body>

    <div class="father-green">

        <div class="son-red">

            <div class="subson-yellow">

                我是孙子辈的我是孙子辈的我是孙子辈的

            </div>

        </div>

        <div class="son-purple">

            我是第二个子元素

        </div>

    </div>

    <div class="mather-pink"><div class="daughter-blue">daughter-blue</div>

    </div>

其效果图如下：

乍一看是不是很乱，看不出层级关系。在此我给大家介绍一个可以看3d布局的工具。这时候就要用到firefox浏览器的tilt工具了。

打开火狐浏览器，点击右侧汉堡按钮，选择附加组件。打开附加组件页面选择插件选项栏 搜索tilt工具，然后安装就可以啦。

安装好后，打开之前的页面。点击右侧汉堡菜单，找到开发者工具，找到tilt。

然后就可以看到3d形式的网页布局了，各模块的层级也可以看到的。用鼠标可以拖动看不同方向的。

言归正传，从上面案例可以看出一个规律。

1. 普通文档流中遵循：“后来者居上”。

* 当两个元素都为块元素时，默认越后面的元素层级越高，但是背景的层级比文字小。后来的块元素 也盖不住前面的文字。

* 当两个元素都为行内块和行内元素时，也是后来的元素比前面的元素层级高，但是与块元素不同的是行内块元素的背景层级比文字高。

* 行内元素和行内块元素的层级比块级元素高。

2. 浮动系列：

* 浮动和浮动比，后一个比前一个层级高

* 浮动和块元素比，浮动层级高

* 浮动和行内块比，行内块层级高

* 浮动和行内比，行内层级高

3. 定位的元素：

* 都为定位元素时，也遵循后一个元素比前一个元素高。

* 绝对定位和块元素比，绝对定位层级高

* 绝对定位和行内块元素比，绝对定位层级高

* 绝对定位和行内元素比，绝对定位层级高

* 绝对定位和浮动，绝对定位层级高。

总结：

层叠上下文（border/background）< 负z-index < block块状盒子 < 浮动的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位并设定了正的z-index值，z-index值越大 层级越高）

子从父原则

对于都是拥有层叠上下文的元素来说, 内部元素的层叠属性受限于其父元素的层叠顺序。

这就回答了我刚开始提出的那个疑问，为什么有的元素z-index值高 却没有盖住z-index值低的元素呢？

就是因为其还受限于父元素的层叠层级。举个例子，代码如下：

<style>

        div {

            text-align:center;

            color:#333;

        }

        .div1 {

            width: 500px;

            height: 50px;

            background-color:#cfc;

            position:relative;

            z-index:5;

            opacity:0.5;

            line-height:50px;

        }

        .div2 {

            width: 500px;

            height: 200px;

            background-color:#fdd;

            position:relative;

            z-index:4;

            margin-top:-10px;

            background-color:rgba(255,255,221,0.8);

            line-height:200px;

            text-align:left;

        }

        .div3 {

            width: 200px;

            height: 50px;

            background-color:#ffc;

            position:absolute;

            z-index:6;

            top:0;

            line-height:50px;

        }

        .div4 {

            width:200px;

            height:50px;

            background-color:#ddf;

            position: absolute;

            z-index: 3;

            bottom:0;

            line-height:50px;

        }

        .div5 {

            width: 200px;

            height:100%;

            background-color:#ff5;

            position: absolute;;

            z-index:1;

            right:0;

            top:0;

            line-height:200px;

        }

        .div6 {

            width: 500px;

            height: 50px;

            background-color:#cfc;

            position: relative;

            z-index:2;

            margin-top: -8px;

        }

    </style>

</head>

<body>

    <div class="div1">div1;position:relative;z-index5;</div>

    <div class="div2">

        div2;position:relative;z-index:4;

        <div class="div3">div3;z-index:6</div>

        <div class="div4">div4;z-index:3</div>

        <div class="div5">div5;z-index:1</div>

    </div>

    <div class="div6">div6;position:relative;z-index:2;</div>

</body>

效果图：

从图中可以看出 z-index为6的div3 却被z-index为5的div1盖住；z-index为1的div5却可以盖住z-index为2的div6；

这是因为 div3、div4和div5都受限于其父元素div2; div2的z-index比div1的低比div6高，那么其所有子元素不管z-index多少都比div1的层级低，都比div6的层级高；

可以这样来看层级

div1===========层级5

div2===========层级4

　　div3 =======层级4.3

　　div4 =======层级4.2

　　div5 =======层级4.1

div6 ========层级2

后续待写。。。

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层叠上下文和层叠顺序

    普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义. 诸位千万不要把层叠水平和CSS的z-index属性混为一谈.没错,某些情况下z-index确实可以影响 ...

  8. 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...

  9. 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠

    写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...

随机推荐

  1. GPU 编程语言 Harlan

    Harlan 是一个声明式的.GPU 领域特定的编程语言.目前主要是用于技术实现和优化的测试用途.该语言很小,用于简化浏览新的分析器和优化. 支持的操作系统: Mac OS X 10.6 (Snow ...

  2. 算法之求质数(Java语言)

    质数(Prime number) 又称素数,指在的自然数中,除了1和该数自身外,无法被其他自然数整除的数(也可定义为只有1与该数本身两个因数的数). 算法原理 验证一个数字 n 是否为素数的一种简单但 ...

  3. (转)informatica 面试题大全

    1 What is the difference between a data warehouse and a data mart? Ø Dataware house: It is a collect ...

  4. [转发]CPU个数、CPU核心数、CPU线程数

    我们在选购电脑的时候,CPU是一个需要考虑到核心因素,因为它决定了电脑的性能等级.CPU从早期的单核,发展到现在的双核,多核.CPU除了核心数之外,还有线程数之说,下面文本就来解释一下CPU的核心数与 ...

  5. centos yum升级php

    centos yum升级php5.3.3到最5.6.3 不要轻易升级,否则后果很严重! 注意事项: 1 升级后之前的php扩展不会丢失 自动会安装对应最新php的扩展2 升级后需重启下apache 才 ...

  6. Apache的配置详解

    Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd.conf文件中修改. 主站点的配置(基本配置) (1) 基本配置: ServerRoot "/mnt/s ...

  7. [EffectiveC++]item24：若所有参数皆需类型转换，请为此采用non-member函数

    Declare non-member functions when type conversions should apply to all parameters. 104页 只有当参数被列于参数列( ...

  8. 通用型正方教务（通杀各版本）存在注入（不需登陆）+获得webshell+提权内网漫游

    某个接口页面存在oracle盲注,可以获得当前用户数据库,dump教师用户表,分析密文加密特征(前人研究成果+基友助攻),破译加密的密码.前台管理员登陆,后台文件上传基于黑名单原理,过滤u完全,上传特 ...

  9. Access用OleDbParameter无法更新数据解决方案

    昨天遇到了一个非常郁闷的问题,这个问题我几乎花了一天的时间才找到了造成问题的症结并解决. 问题是这样,原本一个使用Sqlserver数 据库的系统,我要让它实现Access数据接口,即我可以很方便地把 ...

  10. ACM退役帖

    不知不觉在ACM竞赛的道路上已经走了两年半了,不得不感慨时间真的是过得很快. 还记得大一的时候什么也不会,每天晚上翘晚自习来机房刷题,浑浑噩噩的经过大一的打铁,大二开始有计划系统的学习ACM知识点,直 ...