CSS之层叠上下文（十三）

已于 2023-04-02 19:52:41 修改
阅读量383 收藏 1
点赞数 1
分类专栏： web前端 css 文章标签： css 前端 html
于 2022-10-06 21:11:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/twjtwjtwjm/article/details/127187671
版权

该文先是描述了z-inedx的一些特性，随后讲解了什么是层叠上下文，层叠上下文的创建，层叠顺序等一系列理论概念，层叠上下文这一知识点对于前端开发来说是必须要熟悉并掌握的。

CSS 层叠上下文

1、z-index 设置定位元素层叠顺序

z-index 就是用来指定 定位元素 的堆叠顺序的。
 
同一层叠上下文中 z-index 值的特性：

  • z-index 的默认值是 0
  • z-index 值可以是正，也可以是负
    • z-index 值为负数，会显示在当前层叠上下文中所有元素的最下面
  • z-index 值相同的元素，写在后面的会覆盖前面的
  • z-index 值越大，元素越在上面显示
  • z-index 只针对定位元素有效，对其它元素无效

2、CSS 中的层叠上下文

2.1、什么是层叠上下文

层叠上下文(stacking context)，是 HTML 中一个三维的概念：

  • 在 css2.1 规范中有明确强调，每个 css 盒模型都是处在一个三维空间里面，他们分别处在平面的 X 轴 ，Y 轴 以及表示层叠的 Z 轴；

  • 但并不是所有的盒子都会在 Z 轴

最低0.47元/天 解锁文章
已进厂(。•́︿•̀。)
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css之堆叠上下文
ccxCode的博客
08-23 167
堆叠上下文 堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。 创建堆叠上下文的元素 html元素（根元素） 设置了z-index（非auto）数值的定位元素 同一个堆叠上下文中元素在Z轴上的排列 从后到前的排列顺序： 创建堆叠上下文的元素的背景和边框 堆叠级别(z-index, stack level)为负值的堆叠上下文 常规流非定位的块盒 非定位的浮动盒子 常规流非定位行盒 任何 z-index 是 auto 的定位子元素
37、CSS进阶——堆叠上下文及z-index
lvh98的博客
08-16 218
介绍stack context堆叠上下文的内容。
触发层叠上下文的CSS属性
foradmin的博客
02-18 551
层叠上下文，又称stacking context，是指元素在垂直于屏幕的z轴上的排列布局。 其中影响层叠上下文的属性包括以下几种： 1. flex元素的子元素，同时z-index不是auto 2. opacity值不为1的元素 3. transform值不为none的元素 4. position值为relative/absolute/fixed的元素 当元素发生层叠时，当具有明显的层叠...
CSS基础：CSS的上下文之层叠上下文
热门推荐
余光的博客
02-28 1万+
CSS的上下文之层叠上下文 看到层叠，大家一定会联想到定位元素会是的元素之间发生“遮挡”，而z-index可以改变他们之间的遮挡优先级，但这仅仅是层叠这一概念中很小的一部分。 本文就来聊一聊css中的层叠上下文到底是如何给元素规定叠加顺序的。 一、什么是层叠上下文？ 层叠上下文，英文称作”stacking context”. 我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素
[CSS LEARN]层叠上下文、层叠等级、层叠顺序
weixin_34218890的博客
02-20 109
层叠上下文层叠上下文(stacking context)，是HTML中一个三维的概念，如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。层叠上下文高于普通元素，在z轴上。根节点元素为默认处于层叠上下文中。触发条件HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根...
CSS中层叠上下文的具体使用
11-21
在CSS布局中，层叠上下文（Stacking Context）是一个非常关键的概念，它涉及到元素在Z轴方向上的堆叠顺序，决定了哪些元素会被其他元素覆盖。层叠上下文是HTML中的三维概念，与元素的z-index属性紧密相关，用于解决...
CSS中一些特殊的上下文选择符的使用
12-13
总结来说，CSS中的这些特殊上下文选择符提供了强大的工具，帮助开发者精确地定位和应用样式。它们使得样式规则能够适应复杂多变的HTML结构，增强了CSS的灵活性和控制力。通过巧妙地组合这些选择符，我们可以实现精细...
CSS 中重要的层叠概念详解
01-19
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-...那么这里有几个重要的概念： 层叠上下文 (堆叠上下文, Stacking Context)、 层叠等级 (层叠水平, S
FightingHao#codingDream#层叠上下文1
07-25
在CSS2.1规范中，每个盒模型的位置都是三维的(x轴、y轴、z轴)层叠上下文本质是一个容器，或者叫渲染环境，规定内部元素z轴层叠等级层叠等级是指元素在z轴的上
层叠上下文
weixin_42362211的博客
02-26 294
层叠上下文 在本篇之前的部分——运用 z-index，（我们认识到）某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。MDN解释 层叠上下文由满足以下任意一个条件的元素形成： 文档根元素（）； position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素； posi...
CSS层叠上下文、层叠等级、层叠顺序、z-index
chao1193784290的博客
04-01 609
层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。具象的比喻。
CSS-层叠上下文
natsu-cc的博客
05-08 905
前言：
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
weixin_34112030的博客
08-30 942
前言 最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性的细节理解存在问题，所以结合官方文档和在网上各种搜集整理，明白了其中的原因。写下这篇文章，和大家分享有关CSS中层叠...
层叠上下文、层叠等级、层叠顺序
CSDN
04-06 1009
一、z-index z-index属性用于设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 其在不设置时默认为auto，设置时只能取整数，如”-2，-1，0，1，2，…”。 该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延申到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 注意： z-index只对指定了position属性的元素生效 当没有指定z-index时，所有元素都会被渲染在默认层（0层） 二、什么是层叠上下文 层叠上下文（stacking c
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 90
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
CSS实现从上往下过渡效果
最新发布
Rverdoser的博客
07-18 91
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 230
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1222
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
拖拽上传（预览图片）
喵喵的博客
07-18 148
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
css提高层叠上下文
03-23
层叠上下文是CSS中一个重要的概念，它定了元素在页面上的显示顺序和相互之间的关系。提高层叠上下文可以通过以下几种方式实现： 1. 使用z-index属性：通过设置z-index属性，可以改变元素在层叠上下文中的显示顺序。z-index属性的值越大，元素就越靠近屏幕的前面。 2. 使用position属性：通过设置position属性为relative、absolute或fixed，可以创建一个新的层叠上下文。这样的元素会覆盖其父元素的层叠上下文。 3. 使用transform属性：通过设置transform属性为非none值，可以创建一个新的层叠上下文。这样的元素会覆盖其父元素的层叠上下文。 4. 使用opacity属性：通过设置opacity属性为小于1的值，可以创建一个新的层叠上下文。这样的元素会覆盖其父元素的层叠上下文。 5. 使用will-change属性：通过设置will-change属性为某个CSS属性的值，可以创建一个新的层叠上下文。这样的元素会覆盖其父元素的层叠上下文。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值