关于div的层级，怎么把z-index:1的div的内容高于z-index:2的div？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-08 07:17 标签： videoz网址

发布时间： 09:32:45 来源：亿速云 阅读：121 作者：小新 栏目：

这篇文章主要介绍了css层叠与z-index的使用示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

HTML 元素是一个三维的概念，除了水平和垂直方向外，还会在“z 轴”上层层叠加。
既然是叠加，就会涉及到先后顺序的问题，规范中称之为“层叠等级”。
默认情况下，图文是网页的核心，因此内联元素的等级理应最高；然后是布局，其中浮动元素（脱离文档流）的等级高于块级元素；最低等级是设置背景、边框等装饰属性的元素。

如果元素发生了层叠，层叠等级大的会覆盖小的；如果二者层叠等级相同，根据渲染的顺序，后者会覆盖前者。

如果需要修改元素的层叠等级，可以在已定位的元素(1)上使用 z-index。

细心的人可能会发现，在例子中，我们为装饰元素（类名 f）设置了定位属性，并且 z-index 设置为 0。如果不这样设置，当元素（蓝色背景的测试元素） z-index 取负整数时，就会跑到装饰元素的后面。有关于这一点，后面“z-index 取负整数值”会讲到。

z-index 可以影响层叠等级，但有个前提条件非常重要，就是参与比较的元素必须在同一个层面上，规范中称之为“层叠上下文”。“上下文”说明这是一块封闭的区域，区域内的子元素不会影响到外部元素；而“层叠”，则意味着只要元素创建这个区域，就会在“z轴”上高于当前上下文。
层叠上下文可以通过一些 CSS 属性创建，常见的属性如下：

  • html 元素默认创建的，称为根层叠上下文，所有元素都会置于这个层上。

实际工作中，很少使用 CSS3 新属性去主动创建层叠上下文，因此，创建层叠上下文最常用的方法是，给定位元素设置 z-index 整数值。
前面介绍过，z-index 可以修改元素在当前层叠上下文中的层叠等级，现在 z-index 又有了另一层含义，即创建一个新的层叠上下文。
下面，通过例子来更好的理解层叠上下文：

例子中，没有元素设置 z-index 值，此时 z-index 就是默认的 auto，因此，元素按照渲染顺序，后者覆盖前者。

此时，父元素#1、#2并没有设置 z-index 值，因此它们不会创建新的层叠上下文，这意味着#3、#4仍然同属于根层叠上下文。
同一层叠上下文，层叠等级大的会覆盖小的，所以#4在所有元素之上。

尽管#4的 z-index 值大于#3的，但由于#4属于#2的子元素，其层叠等级完全受制于#2的等级。#2和#3同属于根层叠上下文，且#3大于#2，因此#3在#2（及其子元素）之上。

常规理解 z-index 取负值，应该会跑到背景色的后面：

实际工作中， z-index 取负值可以实现隐藏元素的效果。但如果为父元素创建层叠上下文，子元素就会隐藏不掉：

前后例子对比之后，已经很明显的表明，不管 z-index 的负值多大，依然无法突破当前层叠上下文。

感谢你能够认真阅读完这篇文章，希望小编分享的“css层叠与z-index的使用示例”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!

已接受的解决方案效果很好，但IMO缺乏对其工作原理的解释 . 下面的示例归结为基础知识，并将重要的CSS与不相关的样式CSS分开 . 作为奖励，我还详细解释了CSS定位的工作原理 .

有两个独立的兄弟元素，目标是定位第二个元素（ id 为 infoi ），使其出现在上一个元素（ class 为 navi 的元素）中 . HTML结构无法更改 .

CSS有几个定位元素的属性 . 默认情况下，所有元素都是 position: static . 这意味着元素将根据HTML结构中的顺序进行定位，几乎没有例外 .

可以通过将父元素的 position 设置为 any value other than position: static 来更改引用的位置框架或位置上下文 . 也就是说，我们可以通过给出一个父元素来创建一个新的位置上下文：

The other factor 要注意的是 stack order - 或者元素在z方向上的堆叠方式 . 这里必须知道的是，默认情况下，元素的堆栈顺序是由它们在HTML结构中的顺序相反定义的 . 请考虑以下示例：

我们可以忽略此问题中的堆叠顺序，因为元素的自然HTML结构意味着我们想要在 top 上出现的元素出现在另一个元素之后 .

所以，回到手头的问题 - 我们将使用位置上下文来解决这个问题 .

下面的示例归结为基础知识，并包含一些最小的样式 .

备用（无包装）解决方案

在我们无法编辑任何HTML的情况下，意味着我们无法添加包装元素，我们仍然可以实现所需的效果 .

我要回帖

更多关于 videoz网址 的文章

 

随机推荐