今天搜索资料时，忽然发现了以前没注意的一个知识点，所以拖过来搞一搞，这个知识点叫做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. yii2 注册一个新事件（trigger Event）

    有些时候我们需要在某个方法的中间注册一个新事件,确保某些业务的可拓展性. 下面我介绍一下注册一个新事件的方法: 第一步:需要的地方(比如控制器或模型)中定义一个事件常量(如:const EVENT_C ...

  2. IOS开发中将定时器添加到runLoop中

    runLoop主要就是为线程而生的.他能够让线程在有任务的时候保持工作状态,没有任务的时候让线程处于休眠待备状态. 主线程的runloop默认是开启的.主线程上创建的定时器已经默认添加到runLoop ...

  3. LeetCode 15 3Sum [sort] <c++>

    LeetCode 15 3Sum [sort] <c++> 给出一个一维数组,找出其中所有和为零的三元组(元素集相同的视作同一个三元组)的集合. C++ 先自己写了一发,虽然过了,但跑了3 ...

  4. vue调用 Highcharts 实现多个数据可视化展示

    一创建一个 options.js 代码为: export const option1 = { bar: { title: { text: '珠海猪场' // 指定图表标题 }, credits: { ...

  5. 配置JDK环境变量与配置JRE

    1. 如何配置jdk,x下载jdk     网站: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21 ...

  6. 1.Git安装

    1.安装 首先下载安装包https://git-scm.com/downloads/ 双击安装任意盘符,双击之后一路Next,当然也可以修改默认配置 安装结束!

  7. prometheus — 基于文件的服务发现

    基于文件的服务发现方式不需要依赖其他平台与第三方服务,用户只需将要新的target信息以yaml或json文件格式添加到target文件中 ,prometheus会定期从指定文件中读取target信息 ...

  8. Katalon Studio之swagger中的API导入

    约束条件: swagger中一定要在注解@ApiOperation中设置nickname的唯一值,例如: @ApiOperation(value="新增用户",notes=&quo ...

  9. 十八、泛型 l 注解 l Servlet3.0 l 动态代理 l 类加载器基础加强

    l 泛型 l 注解 l Servlet3.0 l 动态代理 l 类加载器 泛型 1 回顾泛型类 泛型类:具有一个或多个泛型变量的类被称之为泛型类. public class A<T> { ...

  10. 利用redis + lua解决抢红包高并发的问题

    抢红包的需求分析 抢红包的场景有点像秒杀,但是要比秒杀简单点.因为秒杀通常要和库存相关.而抢红包则可以允许有些红包没有被抢到,因为发红包的人不会有损失,没抢完的钱再退回给发红包的人即可.另外像小米这样 ...