层叠上下文（stacking context）

一、什么是层叠式上下文

层叠上下文，是HTML中的一个三维概念

如果元素具备以下任何一个条件，则该元素会创建一个新的层叠上下文。

根元素
z-index不为auto的定位元素

二、什么是层叠级别

同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由层叠级别来决定的。层叠级别是针对同一个层叠上下文而言的。

在同一个曾得上下文中，层叠级别从低到高排列如下：

边框和背景：也就是当前层叠上下文的边框和背景
负z-index：z-index为负值的“内部元素”
块元素：普通文档流下的块盒子（block-levelbox）
浮动盒子：非定位的浮动元素
行内盒子：普通文档流下的行内盒子
z-index：0：z-index为0的“内部元素”
正z-index：x-index为正值的“内部元素”

三、层叠上下文的特点

在同一层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下
在同一层叠上下文中，如果两个元素的层叠级别相同，则后面的元素在前面的元素的上面，遵循后来者居上的原则
在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序，与自身的层叠级别无关

层叠上下文（stacking context）相关推荐

vb6 combo根据index显示_彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
CSS基础：CSS的上下文之层叠上下文
CSS的上下文之层叠上下文看到层叠,大家一定会联想到定位元素会是的元素之间发生"遮挡",而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分. 本文 ...
层叠上下文-《CSS 世界》阅读笔记
层叠规则目录层叠规则目录 z-index 什么是层叠上下文什么是层叠水平层叠顺序层叠准则层叠上下文的特性笔者个人理解层叠上下文的创建定位元素与传统层叠上下文层叠上下文与层叠顺序 ...
CSS层叠上下文、层叠顺序和层叠等级
0 前言在讨论层叠上下文和层叠顺序之前先举个例子,创建两个box,其中红色box长200px宽400px,蓝色box长400px宽200px: <div class="box&quo ...
css层叠上下文详解,CSS定位（层叠上下文）
前面花大力气介绍了布局,现在讲一讲CSS的定位. 定位是什么? 定位跟布局有啥关系?答案是没有关系,定位是指CSS在立体的角度的堆叠的情况,是垂直于屏幕的. 常常会有一个疑惑,CSS中,我给其中的一个 ...
shape context matlab,形状上下文(shape context)算法完全解读
形状上下文(Shape Context)算法完全解读前言一. 轮廓提取(Canny Edge Detection)和轮廓点采样(Jitendra's Sampling) 二. 形状上下文(Shap ...
css如何让两个div上下排列_CSS层叠上下文
在理解层叠上下文之前,我们先谈一谈CSS的z-index属性. 通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠. 然而其实CSS 允许你在现有的渲染引擎上层 ...
到底什么是上下文（Context）
看代码经常能看到一些变量命名 XXXcontext XXXctx,或者一些博客中也总提到一个名词:上下文(context).一直非常疑惑,到底什么叫上下文.也没太好意思问人,感觉就是很简单的概念.自 ...
DDD领域驱动设计(DP、Entity介绍；DDD实现流程；DDD聚合Aggregate；限界上下文(Bounded Context))
DDD(Domain Driven Design) DP(Domain Primitive) define: 一切模型.方法.架构的基础,是指在特定领域.拥有精准定义.可以自我验证.拥有行为的对象,可 ...
Django基础(35): 全局上下文处理器(Context Processors)详解及如何自定义模板上下文处理器...
Django的Context Processors的中文名字有很多种,有人翻译成文本处理器,也有人翻译成上下文处理器.小编最喜欢的翻译是全局上下文处理器,因为它的主要作用就是向模板传递需要全局使用的变 ...

层叠上下文（stacking context）

层叠上下文（stacking context）相关推荐

最新文章

热门文章