堆叠上下文

堆叠上下文

堆叠上下文的排列规则,越往下显示比重越高

  1. 创建堆叠上下文的元素的背景和边框
  2. 堆叠级别为负值的堆叠上下文
  3. 常规流非定位块盒
  4. 非定位的浮动盒子
  5. 常规流非定位行盒
  6. 任何z-index为auto的定位子元素,以及z-index是0的堆叠上下文
  7. 堆叠级别为正值的堆叠上下文

每个堆叠上下文互相独立,不能相互穿插

原文地址：https://www.cnblogs.com/tujw/p/12002959.html

时间： 2024-10-16 00:35:10

堆叠上下文的相关文章

层叠顺序与层叠上下文

一.层叠顺序 所谓层叠顺序就是用户看到页面视角z轴上显示顺序 二.层叠上下文 层叠上下文 html中的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕)视窗或网页用户z轴上的延申,html元素依据自身的属性按优先顺序占用层叠上下文的空间. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>层叠顺序与层叠上下文</title

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 所有题目汇总在我的 Github . 3.层叠顺序(stacking level)与堆栈上下文(stacking context)知多少? z-index 看上去其实很简单,根据 z-index 的高低决定

z-index堆叠规则

一.z-index z-index用来控制元素重叠时堆叠顺序. 适用于:已经定位的元素(即position:relative/absolute/fixed). 一般理解就是数值越高越靠上,好像很简单,但是当z-index应用于复杂的HTML元素层次结构,其行为可能很难理解甚至不可预测.因为z-index的堆叠规则很复杂,下面一一道来. 首先解释一个名词: stacking context:翻译就是“堆叠上下文”.每个元素仅属于一个堆叠上下文,元素的z-index描述元素在相同堆叠上下文中“z轴”

CSS - 层叠上下文（The stacking context）

对 MDN 的上的例子的拓展 Root - DIV #1(z-index: 5) - DIV #2(z-index: 2) - DIV #3(z-index: 4) - DIV #4(z-index: 6) - DIV #5(z-index: 1) - DIV #6(z-index: 3) - DIV #7(未设置 z-index, 且 opacity: 1) - DIV #8(z-index: 6) 上面结构中 DIV #4 的 z-index 比 DIV #1 的大,但因为 DIV #3 创

什么是层叠上下文？如何形层叠上下文？层叠顺序是怎样的？

在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.层叠上下文即元素在某个层级上z轴方向的排列关系. 那么这里有几个重要的概念:层叠上下文 (堆叠上下文, Stacking Context).层叠等级 (层叠水平, Stacking Level).层叠顺序 (层叠次序, 堆叠顺序, Stacking Order).z-index. 1. 层叠上下文 (Stacking Context) 文章<关于z-index 那些你不知道的事>有一个很好的比喻,这

css3学习以及移动端开发基本概念的思考

html{ height:1000px; background-color: red; } @media screen and (width:2560px){ html{ background-color: blue; } } 注意:首先必须弄清楚,我们的width/height值得是浏览器的可视区域的大小(缩小或者放大浏览器会发生变化),而device-width和浏览器的缩放是没有关系的.如我的iMac是 2560*1440,那么当我缩小的时候颜色是红色,而全屏的时候颜色就是蓝色了!然而,如

在data属性中增加两个属性x和y

在控制台页面中主要是显示收集的信息,采用的树形结构使用了ztree框架显示受控的主机浏览器同时用其第一个ip地址来作为特征标识.为了页面的美观采用了bootstrap3这一款css框架,主要是通过对常见的html元素添加标签来改变页面的样式.Ztree框架同样用json数据来定义树形文档,面对的主要需求是点击树中的不同浏览器要动态改变页面的内容,显示与之对应的信息. new关键字在分配内存的时候,会根据其创建的参数调用相应的类的构造函数.delete关键字会在释放内存之前,会首先调用类的析构函数

position&amp;containing block

一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是大盒子里套小盒子中那个大盒子.元素有positon属性就必然涉及到包含块.先简单总结一下. 1.初始包含块(Initial containing block),即根元素的包含框. 在浏览器中是原点与 canvas 原点重合.大小与 viewport 相同的矩形. 2.position:static|relative元素包含块为最近的块级[bl

层叠水平（stacking level)

运用上图的逻辑,上面的题目就迎刃而解,inline-blcok 的 stacking level 比之 float 要高,所以无论 DOM 的先后顺序都堆叠在上面. 不过上面图示的说法有一些不准确,按照 W3官方 的说法,准确的 7 层为: the background and borders of the element forming the stacking context. the child stacking contexts with negative stack levels (m