一、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. 删除ListView item数据 页面不刷新

    最近碰到一个匪夷所思的事情.就是我删除listView中一条item数据  网络请求成功了 但是页面不成功,一番折腾 ,找到问题 ,原来我给item 添加了北京点击事假,又给listView 被禁设置 ...

  2. 【转载】HTTP 响应头与状态码

    原文地址:https://segmentfault.com/a/1190000006689786 HTTP Response Header 响应头域允许服务器传递不能放在状态行的附加信息,这些域主要描 ...

  3. JAVA通用工具类

    1.异常验证框架 框架1:com.google.common.base.Preconditions 框架2:org.apache.commons.lang.Validate 框架3:org.apach ...

  4. 关于JS闭包的一点理解

    通常来讲,闭包通常是指函数内部可以访问到外部作用域的一个过程. 一.广义的定义:任何函数都产生了闭包. 二.狭义的定义:函数内部能访问到其他变量函数的作用域. 我们来看个例子 var a = 10; ...

  5. Scala 技术笔记之 Option Some None

    避免null使用 大多数语言都有一个特殊的关键字或者对象来表示一个对象引用的是“无”,在Java,它是null.在Java 里,null 是一个关键字,不是一个对象,所以对它调用任何方法都是非法的.但 ...

  6. 1 Web 知识基础

    一.什么是跨域访问举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请求 ...

  7. 原始js表单文本框初始化获取焦点和选中

    发现: 1 使用dom对象.focus() 放在 window.onload 时可以 让这个DOM对象获取焦点. 2 使用DOM对象.select() 可以选中文本框中的文字. 3 不要加上on  , ...

  8. UVALive 3026(KMP算法)

    UVALive 3026     KMP中next[]数组的应用: 题意:给出一个字符串,问该字符串每个前缀首字母的位置和该前缀的周期. 思路:裸KMP直接上就是了: 设该字符串为str,str字符串 ...

  9. SqlServer大数据的分区方案

    这里介绍的是大数据量的维护日志的分区解决方案: 每个月1张数据表,1个分组文件.31个分区(按每天1个分区).... 为了日后维护方便,直接删除旧的日志数据文件就可以,而不需要去做分区压缩. --用的 ...

  10. 【5】Django项目配置settings.py详解

    夫唯不争,故天下莫能与之争 --老子<道德经> 本节内容 1.项目配置文件settings.py介绍 2.数据库配置[MySQL] 3.创建模型对象并和数据库同步 4.python官方提供 ...