层叠上下文是 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. 【leetCode】485. 最大连续1的个数

    给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1]输出: 3解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3.注意: 输入的数组只包含 ...

  2. epic无法登陆怎么办【百分百解决】

    epic无法登陆怎么办(感谢吾爱破解吧www.52pjb.net)站长提供的文章教程以及解决思路,谢谢大佬,更详细的解决办法可以参考下他的网站解决的方法实例! epic登陆不上去怎么办?随着GTA5免 ...

  3. 为什么要使用Mybatis-现有持久化技术的对比

    1)JDBC SQL 夹在Java代码块里,耦合度高导致硬编码内伤 维护不易且实际开发需求中SQL有变化,频繁修改的情况很多 2)Hibernate 和 JPA 长难复杂SQL, 对于Hibernat ...

  4. abp-CMS模块-广告

    无论是开发app还是网站,可能都需要一个广告功能,比如我们常见的在首页有个轮播广告,里面会轮播显示多个图片.还有比如一个新闻门户网站 很常见的 banner横幅广告,还有js特效广告等.本篇说说在ab ...

  5. @loj - 2004@ 「SDOI2017」硬币游戏

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 周末同学们非常无聊,有人提议,咱们扔硬币玩吧,谁扔的硬币正面次数 ...

  6. 重学 Java 设计模式：实战享元模式「基于Redis秒杀，提供活动与库存信息查询场景」

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 程序员‍‍的上下文是什么? 很多时候一大部分编程开发的人员都只是关注于功能的实现,只 ...

  7. 利用synchronized解析死锁的一种形成方式

    代码 import ... public class Test{ private static Object o1=new Object(); private static Object o2=new ...

  8. 一位老程序员说，有这份python3的开发指南，月薪能突破20K

    推荐视频: AI人工智能识别技术_第一节AI人工智能识别技术_第二节Python基础案例之教你如何查询对方IP_第一节Python基础案例之教你如何查询对方IP_第二节 有程序员说,这份python3 ...

  9. Maven全局配置文件settings.xml详解（转）

    Maven全局配置文件settings.xml详解   目录 一.概要 1.settings.xml的作用2.settings.xml文件位置3.配置的优先级 二.settings.xml元素详解 1 ...

  10. 算法岗面试题：模型的bias和variance是什么？用随机森林举例

    校招在即,准备准备一些面试可能会用到的东西吧.希望这次面试不会被挂. 基本概念 说到机器学习模型的误差,主要就是bias和variance. Bias:如果一个模型的训练错误大,然后验证错误和训练错误 ...