层叠上下文是 HTML 中的一个三维的概念，每个层叠上下文中都有一套元素的层叠排列顺序。页面根元素天生具有层叠上下文，所以整个页面处于一个“层叠结界”中。

层叠上下文的创建：

  • 页面根元素：html
  • z-index 值为数值的定位元素
  • 其他 css 属性
    • opacity 不是 1
    • transform 不是 none
    • flex，z-index 不是 auto

层叠上下文中的排列规则，从下到上：

  • background/border
  • 负 z-index
  • block 块状水平盒子
  • float 浮动盒子
  • inline 水平盒子
  • z-index:auto, 或看成 z-index:0
  • 正 z-index

由此引申出：定位元素的z-index：0和z-index：auto的区别是，前者会创建层叠上下文，影响布局。

CSS 的层叠上下文是什么的更多相关文章

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

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

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

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

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

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

  4. CSS基础：层叠顺序和层叠上下文

    简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...

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

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

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

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

  7. 层叠上下文 Stacking Context

    层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...

  8. 关于css的层叠上下文和层叠顺序问题

    关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...

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

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

随机推荐

  1. matlab之指派问题（整数规划）

    1 c=[ ; ; ; ]; c=c(:);%将矩阵C按列拉直,然后赋给C,例如矩阵C=[,,;,,],操作完后就是列向量1,,,,, a=zeros(,); for i=: a(i,(i-)*+:* ...

  2. TensorFlow从0到1之TensorBoard可视化数据流图（8）

    TensorFlow 使用 TensorBoard 来提供计算图形的图形图像.这使得理解.调试和优化复杂的神经网络程序变得很方便.TensorBoard 也可以提供有关网络执行的量化指标.它读取 Te ...

  3. 使用 Kafka + Spark Streaming + Cassandra 构建数据实时处理引擎

    Apache Kafka 是一个可扩展,高性能,低延迟的平台,允许我们像消息系统一样读取和写入数据.我们可以很容易地在 Java 中使用 Kafka. Spark Streaming 是 Apache ...

  4. Python数据处理常用工具(pandas)

    目录 数据清洗的常用工具--Pandas 数据清洗的常用工具 Pandas常用数据结构series和方法 Pandas常用数据结构dataframe和方法 常用方法 数据清洗的常用工具--Pandas ...

  5. 关于 JOIN 耐心总结，学不会你打我系列

    现在随着各种数据库框架的盛行,在提高效率的同时也让我们忽略了很多底层的连接过程,这篇文章是对 SQL 连接过程梳理,并涉及到了现在常用的 SQL 标准. 其实标准就是在不同的时间,制定的一些写法或规范 ...

  6. 从 0 开始机器学习 - 神经网络反向 BP 算法！

    最近一个月项目好忙,终于挤出时间把这篇 BP 算法基本思想写完了,公式的推导放到下一篇讲吧. 一.神经网络的代价函数 神经网络可以看做是复杂逻辑回归的组合,因此与其类似,我们训练神经网络也要定义代价函 ...

  7. 深入理解JVM（③）虚拟机性能监控、故障处理工具

    前言 JDK的bin目录中有一系列的小工具,除了java.exe.javac.exe这两个编译和运行Java程序外,还有打包.部署.签名.调试.监控.运维等各种场景都会用到这些小工具. 这些工具根据软 ...

  8. JavaWeb网上图书商城完整项目--验证码

    1.首先需要集成下面的jar 2.在web.xml配置验证码的servlet <?xml version="1.0" encoding="UTF-8"?& ...

  9. android自定义控件onMeasure方法

    1.自定义控件首先定义一个类继承View 有时,Android系统控件无法满足我们的需求,因此有必要自定义View.具体方法参见官方开发文档:http://developer.android.com/ ...

  10. 苹果XR手机的音频体验测试总结

    苹果XR手机的音频   苹果XR算是苹果手机历史上一个里程碑的型号了,是苹果憋了两年的大招,连苹果9的称号就不要了.直接是X.说明苹果对它给予的希望很大.作为一个音频算法工程师,一直想体验一下XR的音 ...