一、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. nagios插件nagiosql安装配置

    nagios插件nagiosql安装配置 # Nagiosql install [root@Cagios ~]# yum install -y libssh2 libssh-devel [root@C ...

  2. 字符串str

    字符串: #字符串的索引从0开始的,如果倒数最后一位是-1,索引的位置是唯一的.var1 = var[0:2] #从第一个字符到第2个字符var2 = var[:] #从第一个到最后var3 = va ...

  3. xamarin.forms模拟rem动态大小值，实现屏幕适配

    开发app的时候,比较麻烦的地方,就是处理屏幕适配,比如文字设为12的大小,测试的时候,看得文字挺正常,可是,放到高分辨率设备一看,文字就变得特别小, 怎样实现随着分辨率变大或者变小,所有的size数 ...

  4. CAD直接打印，不出现打印对话框（com接口VB语言）

    主要用到函数说明: MxDrawXCustomFunction::Mx_Print 直接打印,不出现打印对话框,详细说明如下: 参数 说明 double ptLBx 打印的范围左下角x double ...

  5. @FunctionalInterface

    >> 函数式接口也称为SAM接口 Single Abstract Method interfaces 接口有且仅有一个抽象方法 允许定义静态方法 允许定义默认方法 允许java.lang. ...

  6. C/C++ 中野指针产生的问题

    野指针产生的问题: 野指针的定义: > 野指针是指:指向一个已删除的对象或未申请访问受限内存区域的指针.与空指针不同,野指针无法通过简单地判断是否为NULL避免,而只能通过养成良好的编程习惯来尽 ...

  7. 00.不规则json序列化使用eval、demjson

    有下面一段字符串 import json str0 = '[{"name":"白云大道营业厅","siteaddr":"x...& ...

  8. 35.分组聚合操作—bucket+metric

    主要知识点: bucket+metric 计算分种颜色的电视的平均价格     语法: GET /tvs/sales/_search { "size" : 0, "agg ...

  9. [cf 599D] Spongebob and Squares

    据题意: $K=\sum\limits_{i=0}^{n-1}(n-i)*(m-i)$ $K=n^2m-(n+m)\sum{i}+\sum{i^2}$ 展开化简 $m=(6k-n+n^3)/(3n^2 ...

  10. Fibonacci数列（codevs 1250）

    题目描述 Description 定义:f0=f1=1, fn=fn-1+fn-2(n>=2).{fi}称为Fibonacci数列. 输入n,求fn mod q.其中1<=q<=30 ...