一、z-index

　　　　z-index默认处于非激活状态，只有定位元素（即position:relative/absolute/fixed时）才会被激活。

　　　　z-index与层叠上下文关联。

　　　　当z-index相同（即层叠级别相同）的时候，遵循“后来者居上”的原则。

　　二、层叠上下文

　　　　以下两种情况，会创建层叠上下文：

　　　　　　1.根元素

　　　　　　2.z-index不为auto的“定位元素”

　　三、层叠级别

　　　　层叠级别由低到高为：　　　　

　　　　层叠上下文的边框和背景<负z-index<块盒子（普通文档流下的块盒子）<浮动盒子（非定位的浮动元素）<行内盒子（普通文档流下的行内盒子）<z-index:0<正index

　　四、某些情况下，z-index会在IE中无效。（个人未遇到该种情况，所以不便举例说明）

　　（该文供学习交流，欢迎大家共同探讨~）

　　

　　

z-index 、层叠上下文、层叠级别、z-index失效的更多相关文章

  1. 带大家认识CSS层叠上下文/层叠等级的区别和意义

    什么是“层叠上下文” 层叠上下文(stacking context),是HTML中一个三维的概念.在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴.一般情 ...

  2. 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...

  3. css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序

    前言 在编写css样式代码的时候,我们经常会遇到z-index属性的使用,我们可能只了解z-index能够提高元素的层级,并不知道具体是怎么实现的.本文就来总结一个由z-index 引发的层叠上下文和 ...

  4. 包含块、层叠上下文、BFC

    包含块 什么是包含块?简单来说,就是决定一个元素大小和定位的元素.一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素: 1.position:fixed 的元素 包含块是当前可视 ...

  5. 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠

    写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...

  6. z-index和层叠上下文

    z-index基础介绍:三维坐标空间里,x轴通常用来表示水平位置,y轴来表示垂直位置,还有z轴来表示在纸面内外方向上的位置,像下面的图片一样: css允许的z-index的值是 ● auto (自动, ...

  7. CSS——关于z-index及层叠上下文（stacking context）

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  8. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  9. 层叠上下文(The stacking context)

    MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...

随机推荐

  1. 遍历select搜索结果，只取数字标key值，防止重复

    //遍历select搜索结果,只取数字标key值,防止重复 foreach ($row as $key => $value) { if (is_int($key)) { echo $value; ...

  2. 【Centos7】Tomcat安装及一个服务器配置多个Tomcat

    完成解压 参考 http://www.cnblogs.com/h--d/p/5074800.html https://www.cnblogs.com/tudou-22/p/9330875.html 步 ...

  3. 发布自己的nuget包

    1.先到www.nuget.org注册账户,然后在用户中心获取apikey 2.到https://dist.nuget.org/index.html下载最新的nuget.exe,放到你的项目根目录下 ...

  4. linux强制踢出已登录的用户及本地用户

    方法一: pkill -kill -t pts/0 方法二: fuser -k /dev/pts/0 你也可以给他发送关闭信息然后关闭 echo "你被管理员踢出了" > / ...

  5. 如何使用 Python 创建一名可操控的角色玩家

    在 这个系列的第一篇文章 中,我解释了如何使用 Python 创建一个简单的基于文本的骰子游戏.在第二部分中,我向你们展示了如何从头开始构建游戏,即从 创建游戏的环境 开始.但是每个游戏都需要一名玩家 ...

  6. 面试bb

    1.面试者进行自我介绍 2.学校/学历/大学生活及课程的心得总结(人品,性格评估) 3.技能介绍(是否对应聘工作有帮助,评估学习能力):编程/操作系统/测试工具/测试方法/脚本 4.离职原因/项目经验 ...

  7. defer, panic, recover使用总结

    1. defer : 延迟调用.多个defer,依次入栈,在函数即将退出时,依次出栈调用 package main import "fmt" func main() { defer ...

  8. 我理解的数据结构（二）—— 栈（Stack）

    我理解的数据结构(二)-- 栈(Stack) 一.栈基础 栈是一种线性结构 相比较数组,栈对应的操作是数组的子集 只能从一端添加元素,也只能从同一端取出元素,这一端称为栈顶 栈是一种后进先出的数据结构 ...

  9. JQ + PHP + TrackMore物流信息跟踪

    在使用之前,您需要先去trackmore官方网站申请API_KEY,传送门:TrackMore html <script type="text/javascript" src ...

  10. Vue 安装教程

    1.下载node.js https://nodejs.org/en/ 2.检查环境变量: npm init (初始化项目) npm i webpack vue vue-loader 安装依赖: npm ...