今天搜索资料时，忽然发现了以前没注意的一个知识点，所以拖过来搞一搞，这个知识点叫做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. DirBuster工具扫描敏感文件

    DirBuster是一个多线程Java应用程序,旨在强制Web/应用程序服务器上的目录和文件名.它可以选择执行纯暴力,在查询隐藏文件和目录方面非常好用. 1)安装DirBuster 前提:电脑中必须安 ...

  2. 快速幂 ，快速幂优化，矩形快速幂（java）

    快速幂形式 public static int f(int a,int b,int c){ int ans =1; int base=a; while(b!=0){ if((b&1)!=0) ...

  3. SpringBoot+ Mybatis 搭建

    spring boot+mybatis整合   LZ今天自己搭建了下Spring boot+Mybatis,比原来的Spring+SpringMVC+Mybatis简单好多.其实只用Spring bo ...

  4. 机器学习（九）隐马尔可夫模型HMM

    1.隐马尔可夫HMM模型 一个隐马尔可夫模型可以表示为\[\lambda=\{A,B,\pi\}\]具体就不说了,比较基本. 2.HMM模型的三个基本问题 1.概率计算问题:给定\(\lambda\) ...

  5. rest_framework之认证源码剖析

    如果我们写API有人能访问,有人不能访问,则需要些认证. 如何知道该用户是否已登入? 如果用户登入成功,则给用户一个随机字符串,去访问另一个页面. 以前写session的时候,都是把session写c ...

  6. 小甲鱼Python3笔记

    000-愉快的开始 入门容易,学习难,代码量少. 跨平台: Windows, Mac OS, Linux, UNIX. 应用领域: 操作系统 WEB 3D动画 企业应用 云计算等等. 001-我和Py ...

  7. post数据时报错：远程服务器返回错误: (400) 错误的请求。

    网上查了多种方法,有不少说法,报400说是传的数据格式不对,最后的结论确实是数据格式不对. Content_Type为:application/json,配的数据格式有些麻烦,特别数多层,单层还好.例 ...

  8. sqlserver 电脑重启以后服务突然无法启动 报错

    可能是sql server 评估期已过  在升级中输入产品密钥试试

  9. TypeError: parse() got an unexpected keyword argument 'transport_encoding'

    错误: TypeError: parse() got an unexpected keyword argument 'transport_encoding'You are using pip vers ...

  10. node环境使用multer搭建一个图片接收服务器

    为了测试图片上传插件的上传功能是否好用,最近尝试搭建了一个接收图片的服务器,因为图片上传的编码格式是form-data,所以我选择使用express+multer,实现过程中发现有几个需要注意的地方, ...