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 创建了层叠上下文，这个上下文的 z-index 比 DIV #1 小，所以渲染出的效果是 DIV #4 在 DIV #1 后面。

DIV #8 的 z-index 比 DIV #1 的大，并且 DIV #7 没有创建堆叠上下文，所以她渲染出的效果是 DIV #8 在 DIV #1 前面。

参考：

The stacking context - CSS: Cascading Style Sheets | MDN

原文地址：https://www.cnblogs.com/jffun-blog/p/11042933.html

时间： 2024-11-04 05:26:07

CSS - 层叠上下文（The stacking context）的相关文章

css层叠上下文

css层叠 stacking order #div{ background:#ddd; border:1px solid red; /*z-index: -1;*/ /*display:block*/ /*float: right;*/ /*display: inline-block;*/ /*z-index: auto;*/ /*z-index: 1;*/ }

以往,由于自己使用z-index的频率不大,所以对这个CSS属性存在比较片面的认识.一直认为z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序.z-index值越大在Z轴上就越靠上,也就是离屏幕观察者越近.最后才发现这个认识存在很大的问题: 首先,z-index属性值并不是在任何元素上都有效果.它仅在定位元素(定义了position属性,且属性值为非static值的元素)上有效果. 判断元素在Z轴上的堆叠顺序,不仅仅是直接比较两个元素的z-index值的大小,这个堆叠顺序实际由元素的

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

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

关于stacking context和CSS z-index的总结

HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了.但是,往往在项目中发现有些情况和我们的预期不太一致.经过研究和学习,总算搞清楚了其中的关系.简单总结如下: 只有Positioned(Position不为static的元素)元素的z-index属性才有效 z-index可以是负数没有z-index或z-index无效的元素(参见第一条)相当于z-index为0: 符合某些条件的元素,浏览器会为它们创建一个叫stacking context的东东.根据DOM树结构,stack

CSS:Stacking Context

通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠.在这种情况下,只有一个渲染进程,所有元素都知道其他元素所占用的空间.z-index属性可让你在渲染内容时调整对象分层的顺序,相信大部分人都用过position,当父元素设置了position,子元素设置position:absolute,默认是覆盖在元素上的,其实里面就隐藏了z-index的应用,今天来彻底了解这个z-index. 这边先讲个概念:层叠上下文,什么是层叠上下文:这边可以讲层叠上下文理解成一

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

简介在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单独作为一个体系,也就是说内容的层叠顺序是以容器的层叠顺序为基准的,而与容器外部元素的层叠顺序无关,层叠上下文的创建可以分为以下三类: (1) 页面根元素天生具有层叠上下文,称为根层叠上下文 (2) "z-index" 为数值的定位元素拥有自己的层叠上下文,数值越大,层叠顺序越高 (3) 某

css中的opacity和z-index对于stacking context的影响

今天偶尔看到了一篇文章讲z-index的, 有一些新的收获吧, 记录一下. 他给了一个例子: 1 <div> 2 <span class="red">Red</span> 3 </div> 4 <div> 5 <span class="green">Green</span> 6 </div> 7 <div> 8 <span class="blu

层叠顺序与层叠上下文

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

层叠水平（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