CSS 的层叠上下文是什么
层叠上下文是 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 的层叠上下文是什么的更多相关文章
- 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- CSS——关于z-index及层叠上下文(stacking context)
以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...
- 一篇通俗易懂的CSS层叠顺序与层叠上下文研究
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...
- CSS基础:层叠顺序和层叠上下文
简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...
- 带大家认识CSS层叠上下文/层叠等级的区别和意义
什么是“层叠上下文” 层叠上下文(stacking context),是HTML中一个三维的概念.在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴.一般情 ...
- 层叠上下文(The stacking context)
MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...
- 层叠上下文 Stacking Context
层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...
- 关于css的层叠上下文和层叠顺序问题
关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...
- 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠
写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...
随机推荐
- python数据类型转换&&格式化输出
①python的数据类型包含:数字.字符串.列表.元组.字典.集合这六种基本数据类型.不同数据类型的数据可以进行类型的转换. 使用input让用户输入的数据默认为字符串类型: name = input ...
- Spark-stream,kafka结合
先列参考文献: Spark Streaming + Kafka Integration Guide (Kafka broker version 0.10.0 or higher):http://spa ...
- sed中使用shell变量
假设希望在 file_to_modified 文件最后新增一行以下信息:传入 shell 脚本文件的第一个参数,以及当前时间(YYYY-MM-DD HH:MMS) date "+%Y-%m- ...
- Web api配置填坑攻略
最近开始使用web api,开发调试过程还算顺利,现在项目已经发布,网站已经部署,结果浏览过程出现问题(不出问题好像不正常吧……),做个note开始填坑. 1.1号坑 咋一开始就爆出另一个程序正在使用 ...
- 一文梳理JavaScript 事件循环(Event Loop)
事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...
- [搬运]Intellij IDEA 汉化
Github地址: https://github.com/pingfangx/TranslatorX
- Python 程序报错崩溃后,如何倒回到崩溃的位置?
假设我们有一段程序,从 Redis 中读取数据,解析以后提取出里面的 name 字段: import json import redis client = redis.Redis() def read ...
- Perl入门(一)Perl的基本类型及运算符
在学习Perl的基础之前,还是希望大家有空去看以下Perl的简介.百度百科 一.Perl的基本类型 Per的基本类型分为两种:数值型和字符串型. 数值型可细分为 整数型.如123. 浮点型.如123. ...
- 在Ubuntu上实现人脸识别登录
安装Howdy: howdy项目地址 sudo add-apt-repository ppa:boltgolt/howdy sudo apt update sudo apt install howdy ...
- Excel表格中第一个输入的零不显示怎么办?
Excel表格是办公的人经常要用到的软件,经常用它来统计和记录各种数据,但是有时候表格中第一个数字是零的时候,经常第一个零输入时不显示的,这个情况我们怎么解决呢?这里小编跟大家讲一下希望能帮助大家. ...