今天搜索资料时，忽然发现了以前没注意的一个知识点，所以拖过来搞一搞，这个知识点叫做CSS的7阶层叠水平

在说这个知识之前，我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平

这个东西就是z-index属性（此篇为上篇，仅仅讲z-index）

基本含义：

z-index通俗来说就是在Z轴上的索引，Z轴是垂直于电脑屏幕的一根轴

用来设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即通常情况下，z-index为2的元素会在z-index为1的元素上面

取值情况：

z-index有三个取值

　　auto：默认。堆叠顺序与父元素相等。

　　number：设置元素的堆叠顺序。

　　inherit：规定应该从父元素继承 z-index 属性的值。

特性：

　　1.支持负值（如果为正数，则离用户更近，为负数则表示离用户更远。）

　　2.支持CSS3 animation动画；（并没什么实用应用场景）

　　3.在CSS2.1时代，需要和定位元素配合使用，如果不考虑CSS3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用！在CSS3中有例外

准则：

　　1.后来者居上原则

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .a{

        position: absolute;

        height: 400px;

        width: 400px;

        background-color: yellow；

    }

    .b{

        position: absolute;

        height:400px;

        width: 400px;

        background: red;

        margin-left: 100px;

         }

    </style>

</head>

<body>

    <div class="a"></div>

    <div class="b"></div>

</body>

</html>

运行结果：

解析：我们可以看到，红色作为后来的元素覆盖在之前的元素上了，在未设置z-index的前提下，后来元素会覆盖前面添加到元素，当然实在开启了绝对定位的前提下（不开启绝对定位不能直观的看到效果）

　　

　　2.谁大谁先上原则

　　　　在.a添加z-index:2,在.b添加z-index:1

　　　运行结果：

　　　　

　　解析：通常情况下，z-index越大，层级越高，越在上面

　　当发生嵌套时，祖先优先原则

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .a{

        position: absolute;

        height: 400px;

        width: 400px;

        background-color: yellow;

        z-index: 2;

    }

    .b{

        position: absolute;

        height:400px;

        width: 400px;

        background: red;

        margin-left: 100px;

        z-index: 1

         }

    .a1{

        position: absolute;

        height: 200px;

        width: 200px;

        background-color: aqua;

    }

    .b1{

        position: absolute;

        height: 200px;

        width: 200px;

        background-color: blue;

        z-index: 100

    }

    </style>

</head>

<body>

    <div class="a">

        <div class="a1"></div>

    </div>

    <div class="b">

        <div class="b1"></div>

    </div>

</body>

</html>

运行结果：

解析：按照前面所说应该是蓝色的格子会在最上面，这里并没有，原因就是祖先优先原则

　　　a的层级大于b的层级，所以a里面的元素会始终在b的上面，即使b的子元素的z-index为10000也没用

注意：

　　所有主流浏览器都支持 z-index 属性

　　任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

CSS中层叠和CSS的7阶层叠水平（上篇）的更多相关文章

  1. CSS 7阶层叠水平

    著名的7阶层叠水平(stacking level) 层叠上下文 background/border 负z-index block块状水平盒子:正常流失布局,非inline-block,无positio ...

  2. 关于css中层叠性的一点理解

    关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...

  3. CSS中层叠和继承的概念。

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...

  4. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  5. CSS中各种长度单位总结

    在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...

  6. css中代码格式以及@import的语法结构

    CSS中代码格式 CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范分析一个典型CSS的语句: p ...

  7. css中的!important作用

    css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...

  8. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  9. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

随机推荐

  1. ubuntu下安装pandas出现 compile failed with error code 1 in /tmp/pip_build_hadoop/pandas

    都是用pip装的,是不是应该用apt-get 装的呀 ubuntu下安装pandas (出现 compile failed with error code 1 in /tmp/pip_build_ha ...

  2. 使用getline输入一行字符串

    给定10个国家名,按字母顺序输出,国家名中可以包含空格,国家名用换行隔开 #include<algorithm> #include<iostream> #include< ...

  3. ARouter基础使用（一）

    一个用于帮助 Android App 进行组件化改造的框架 —— 支持模块间的路由.通信.解耦1.新建一个Android项目 "ARouterDemo"2.添加依赖和配置 andr ...

  4. Java-JSON 解析

    JSON  JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采 ...

  5. MySql解除安全模式：Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column.

    在修改一条数据字段时报错: Error Code: 1175. You are using safe update mode and you tried to update a table witho ...

  6. OO第一次博客作业

    OO第一次博客作业 一.三次作业的bug反省 1.自己发现别人的问题 (1)输入处理的问题,比如第一次作业,主要就是处理输入的字符串,然后有同学的正则表达式有问题,则对于一些错误输入就不能正确判断. ...

  7. Python 爬虫入门(一)——爬取糗百

    爬取糗百内容 GitHub 代码地址https://github.com/injetlee/Python/blob/master/qiubai_crawer.py 微信公众号:[智能制造专栏],欢迎关 ...

  8. [Swift]LeetCode348. 设计井字棋游戏 $ Design Tic-Tac-Toe

    Design a Tic-tac-toe game that is played between two players on a n x n grid. You may assume the fol ...

  9. [Swift]LeetCode670. 最大交换 | Maximum Swap

    Given a non-negative integer, you could swap two digits at most once to get the maximum valued numbe ...

  10. [Swift]LeetCode788. 旋转数字 | Rotated Digits

    X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...