层叠顺序与堆栈上下文知多少

  层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

  z-index 看上去其实很简单,根据 z-index 的高低决定层叠的优先级,实则深入进去,会发现内有乾坤。

  看看下面这题,定义两个 p A 和 B,被包括在同一个父 p 标签下。HTML结构如下:

    

#pA display:inline-block

    

 #pB float:left

登录后复制

  它们的 CSS 定义如下:

.container{    position:relative;    background:#ddd;}.container > p{    width:200px;    height:200px;}.float{    float:left;    background-color:deeppink;}.inline-block{    display:inline-block;    background-color:yellowgreen;    margin-left:-100px;}

登录后复制

  大概描述起来,意思就是拥有共同父容器的两个 p 重叠在一起,是 display:inline-block 叠在上面,还是float:left 叠在上面?

  注意这里 DOM 的顺序,是先生成 display:inline-block ,再生成 float:left 。当然也可以把两个的 DOM 顺序调转如下:

    

 #pB float:left

    

#pA display:inline-block

登录后复制

  会发现,无论顺序如何,始终是 display:inline-block 的 p 叠在上方。

  Demo戳我。

    

#pA inline-block

    

 #pB float:left

    

 #pB float:left

    

#pA inline-block

登录后复制

  这里其实是涉及了所谓的层叠水平(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 (most negative first).

  the in-flow, non-inline-level, non-positioned descendants.

  the non-positioned floats.

  the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

  the child stacking contexts with positive stack levels (least positive first).

  稍微翻译一下:

  形成堆叠上下文环境的元素的背景与边框

  拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)

  正常流式布局,非 inline-block,无 position 定位(static除外)的子元素

  无 position 定位(static除外)的 float 浮动元素

  正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包括 display:table 和 display:inline )

  拥有 z-index:0 的子堆叠上下文元素

  拥有正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)

  所以我们的两个 p 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高,所以叠得更高。

  不过!不过!不过!重点来了,请注意,上面的比较是基于两个 p 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目,给两个 p ,增加一个 opacity:

.container{    position:relative;    background:#ddd;}.container > p{    width:200px;    height:200px;    opacity:0.9; // 注意这里,增加一个 opacity}.float{    float:left;    background-color:deeppink;}.inline-block{    display:inline-block;    background-color:yellowgreen;    margin-left:-100px;}

登录后复制

  Demo戳我。

  会看到,inline-block 的 p 不再一定叠在 float 的 p 之上,而是和 HTML 代码中 DOM 的堆放顺序有关,后添加的 p 会 叠在先添加的 p 之上。

  这里的关键点在于,添加的 opacity:0.9 这个让两个 p 都生成了 stacking context(堆叠上下文) 的概念。此时,要对两者进行层叠排列,就需要 z-index ,z-index 越高的层叠层级越高。

  堆叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

  那么,如何触发一个元素形成 堆叠上下文 ?方法如下,摘自 MDN:

  根元素 (HTML),

  z-index 值不为 “auto”的 绝对/相对定位,

  一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,

  opacity 属性值小于 1 的元素(参考 the specification for opacity),

  transform 属性值不为 “none”的元素,

  mix-blend-mode 属性值不为 “normal”的元素,

  filter值不为“none”的元素,

  perspective值不为“none”的元素,

  isolation 属性被设置为 “isolate”的元素,

  position: fixed

  在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值

  -webkit-overflow-scrolling 属性被设置 “touch”的元素

  所以,上面我们给两个 p 添加 opacity 属性的目的就是为了形成 stacking context。也就是说添加 opacity 替换成上面列出来这些属性都是可以达到同样的效果。

  在层叠上下文中,其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是,其子元素的 z-index 值只在父级层叠上下文中有意义。意思就是父元素的 z-index 低于父元素另一个同级元素,子元素 z-index再高也没用。

  理解上面的 stacking-level 与 stacking-context 是理解 CSS 的层叠顺序的关键。

以上就是层叠顺序与堆栈上下文知多少的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2902462.html

(0)
上一篇 2025年3月11日 01:36:21
下一篇 2025年3月11日 01:36:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 绿豆汤可以加红糖一起喝吗

    绿豆汤是生活中比较常见的一种夏季饮品,它的做法比较简单,喝起来清甜可口,可以降温消暑、降火去燥等,深受人们喜欢。绿豆汤一般是加糖的,可以加适量的红糖,两者之间不冲突,并且还能起到很不错的食用功效。 绿豆汤可以加红糖一起喝吗 可以。 煮绿豆汤…

    2025年4月26日
    136.1K00
  • 冰糖葫芦可以用红糖做吗

    冰糖葫芦是生活中比较受欢迎的一种小吃,它的做法比较简单,食材的选择比较多,很多人都会用各种各样的水果做糖葫芦。做冰糖葫芦一般都要熬糖,大多都会用冰糖或白糖,也可以用红糖,但是不建议用蜂蜜做,不容易成型。 冰糖葫芦可以用红糖做吗 可以用红糖做…

    2025年4月11日
    133.1K00
  • H5你真的了解吗?(绝对干货)

         h5广告,包括广告的设计流程,究竟有什么讲究,和阶段。为了能帮助更多的人了解h5广告,我专门做了一个讲义。同时,也让我意外的收到了非常好反馈和认!这是对我的极大鼓励!我的讲义内容仍然还有不少不完善和有待系统的内容。但是,我相信你在…

    2025年3月29日 编程技术
    100
  • 混合移动开发框架详解

      kerkee是一个多主体共存型hybrid框架,具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、集成云服务、具有debug环境、彻底解决跨域问题。 hybrid   kerkee框架的诞生背景   Hybrid Ap…

    编程技术 2025年3月29日
    200
  • 基于javascript的组件开发方式

      作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。   下面我们来谈谈,在现有的知识体系下,如何很好的写组件。   比如我们要…

    编程技术 2025年3月29日
    100
  • 从登录框看前端

      我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登陆框为入口,谈一谈如何完善自己的程序。   在很多人眼里,前端就是 DIV+CS…

    编程技术 2025年3月29日
    100
  • 如何适配不同分辨率和不同屏幕尺寸的手机

      背景   开发移动端H5页面   面对不同分辨率的手机   面对不同屏幕尺寸的手机   视觉稿   在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。   对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以…

    2025年3月29日 编程技术
    200
  • React Native第一课

         前言   本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客。   阅读本文…

    2025年3月29日 编程技术
    200
  • 三天学会HTML5 ——多媒体元素的使用

      目录   1. HTML5 Media-Video   2. HTML5 Media-Audio   3. 拖拽操作   4. 获取位置信息 立即学习“前端免费学习笔记(深入)”;   5. 使用Google 地图获取位置信息   多媒…

    2025年3月29日 编程技术
    200

发表回复

登录后才能评论