今天搜索资料时，忽然发现了以前没注意的一个知识点，所以拖过来搞一搞，这个知识点叫做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. java中class文件与jar文件

    1. JAR 文件包 JAR 文件就是 Java Archive File,顾名思意,它的应用是与 Java 息息相关的,是 Java 的一种文档格式.JAR 文件非常类似 ZIP 文件——准确的说, ...

  2. 20175324 2018-2019-2 《Java程序设计》第8周学习总结

    本周学习<Java程序设计>第十五章: 泛型: 泛型(Generics)的主要目的是可以建立具有类型安全的集合框架,如链表.散列映射等数据结构. 泛型类声明:class 名称<泛型列 ...

  3. LAMP构架搭建论坛

    安装MYSQL数据库服务程序       LAMP动态网站部署架构是一套由Linux+Nginx+MYSQL+PHP组成的动态网站系统解决方案,具有免费.高效.扩展性强且资源消耗低等优良特性.使用手工 ...

  4. Kali学习笔记41：SQL手工注入（3）

    前两篇文章都是基于目标系统允许union,order by语句 并且可以读取infomation_schema元数据库 如果遇到的是安全方面做得很好的应用,进行了权限限制,那么我们有什么办法呢? 猜测 ...

  5. [Swift]LeetCode17. 电话号码的字母组合 | Letter Combinations of a Phone Number

    Given a string containing digits from 2-9 inclusive, return all possible letter combinations that th ...

  6. [Swift]LeetCode158. 用Read4来读取N个字符II $ Read N Characters Given Read4 II

    The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the actu ...

  7. [Swift]LeetCode817. 链表组件 | Linked List Components

    We are given head, the head node of a linked list containing unique integer values. We are also give ...

  8. [Swift]LeetCode995. K 连续位的最小翻转次数 | Minimum Number of K Consecutive Bit Flips

    In an array A containing only 0s and 1s, a K-bit flip consists of choosing a (contiguous) subarray o ...

  9. 熟悉使用Github,VS进行项目的开发(第二次作业)

    git地址 https://github.com/Jason98w git用户名 Jason98w 学号后5位 72323 博客地址 https://www.cnblogs.com/jason5689 ...

  10. xtrabackup备份

    增量备份: xtrabackup --backup --target-dir=/data/backup/base --datadir=/var/lib/mysql xtrabackup --backu ...