今天搜索资料时，忽然发现了以前没注意的一个知识点，所以拖过来搞一搞，这个知识点叫做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. modbus tcp数据报文结构

    modbus tcp数据报文结构 请求:00 00 00 00 00 06 09 03 00 00 00 01 响应:00 00 00 00 00 05 09 03 02 12 34 一次modbus ...

  2. 登录RabbitMQ的方法

    一:(运行RabbitMQ之前需要先打开docker 容器)打开相应的路径,在windows Powershell 管理员下打开 输入:docker-compose -f .\docker-compo ...

  3. java DTO对象与PO对象的相互转换

    2018-09-27 10:27:50 前言: 在实际开发中往往需要DTO对象与PO对象的相互转换: 先说说什么是DTO对象吧,个人觉得DTO就是PO的扩展而已,PO专门指向数据库,DTO作扩展(字段 ...

  4. 使用Bandwagon服务器ftp解决git clone速度慢的问题

    写在前面 git clone速度往往很慢,我们可以先在身处美国的服务器上git clone,然后把文件用ftp传回来即可. 开始 我们以opencv为例 git clone https://githu ...

  5. python Tags 母板 组件 静态文件相关 自定义simpletag inclusion_tag

    一.Tags(一)for 1.基本用法 <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% e ...

  6. MySQL 5.7 忘记密码

    MySQL 5.7 忘记Root密码 用管理员身份运行cmd.然后使用命令进行: 1.打开MySQL>bin文件夹 >cd C:\mysql\mysql5.7.14\bin 2.停止mys ...

  7. 企业IT管理员IE11升级指南【13】—— 如何把IEMP迁移到GPP

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  8. Dubbo+zookeeper构建高可用分布式集群（二）-集群部署

    在Dubbo+zookeeper构建高可用分布式集群(一)-单机部署中我们讲了如何单机部署.但没有将如何配置微服务.下面分别介绍单机与集群微服务如何配置注册中心. Zookeeper单机配置:方式一. ...

  9. Oracle数据库备份及还原

    Oracle数据库备份 1:找到Oracle安装路径我的就是默认C盘  C:\app\wdjqc\admin\orcl\adump 2:执行文件:back.bat 文件内容如下: @echo off ...

  10. [Swift]LeetCode222. 完全二叉树的节点个数 | Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Note: Definition of a complete binary tree ...