z-index属性_您可能不知道的Z-Index属性

最新推荐文章于 2024-02-01 12:27:26 发布

daique1908

最新推荐文章于 2024-02-01 12:27:26 发布

阅读量740

点赞数

文章标签：定位 css python java html

z-index属性

CSS中的z-index属性看起来很简单，但是如果您真的想了解它的工作原理，那么可以从表面发现很多东西。在本教程中，我们将通过查看堆栈上下文和一些实际示例来阐明z-index的内部工作原理。

CSS为框的布局提供了三种不同的定位方案：

正常文件流
漂浮
绝对定位

最后一个从正常流程中完全删除了一个元素，并依靠开发人员告诉该元素在哪里显示。

您可以给它提供top，left，bottom和right值，以将元素放置在二维空间中，但是CSS还允许您使用z-index属性将其放置在第三维中。

从表面上看，z-index似乎是易于使用的属性。您可以设置值来确定元素将在第三个轴上的位置，然后完成。在表面之下，还有很多可以深入的内容，包括关于哪些类型的元素位于其他元素之上的许多规则。

让我们从基础开始，以确保我们都在同一页上，然后我们将讨论堆栈以了解有关z-index在幕后发生的更多情况。

Z-Index基础知识

我确定您熟悉三维坐标空间。我们有一个x轴（通常用于表示水平），一个y轴（用于表示垂直），以及一个z轴（用于表示在页面或页面中发生的情况）中的情况。

因为屏幕是二维平面，所以我们从字面上看不到 z轴。我们以透视图的形式看到它，并且当某些元素共享相同的二维空间时，它们会出现在其他元素的前面或后面。

为了确定元素在第三轴上的位置，CSS允许我们在z-index属性上设置三个值。

自动（默认）
（整数）
继承

目前，我们将重点放在整数值上。可以是正数，负数或0。值越大，该元素越接近查看者。值越低，显示的越远。

如果放置两个元素，以便它们都占据二维空间的共享区域，则z索引较大的元素将在它们共享空间的区域中遮盖或遮盖z索引较低的元素。

我假设以上内容很容易理解，并且很可能表现完全符合您的预期。但是，还有一些悬而未决的问题。

当具有z索引的定位元素与常规文档流中的元素重叠时，哪个出现在顶部？
放置一个元素并浮动一个元素时，哪个显示在顶部？
当定位的元素嵌套在其他定位的元素内时会发生什么？

要回答这些问题，我们需要更多地了解z-index的工作原理，尤其是堆栈上下文，堆栈级别和堆栈顺序的概念。

堆叠上下文和堆叠级别

堆叠上下文和堆叠级别可能很难概念化，因此暂时将一张桌子想象成一堆坐在上面的物品。该表表示堆栈上下文。如果第一个表旁边有第二个表，则表示另一个堆栈上下文。

现在想象一下，在第一个桌子上有四个小块，都直接坐在桌子上。在这四个块的顶部是一盘玻璃，在玻璃板上是一碗水果。块，玻璃板和水果盘分别代表表的堆叠上下文中的不同堆叠级别。

为每个网页创建一个默认的堆栈上下文。此上下文（表）的根是html元素。 html标记内的所有内容都位于此默认堆栈上下文内的堆栈级别（对象位于表上）。

在为元素分配auto以外的z-index值时，您将创建一个新的堆叠上下文，其新的堆叠级别独立于页面上的其他堆叠上下文和堆叠级别。您将另一张桌子带入房间，以便坐在上面。

堆叠顺序

理解堆叠顺序的最简单方法是举一个简单的例子，如此简单，我们暂时不会考虑定位的元素。

想想一个非常简单的网页。除了默认的<html> ， <head> ， <body>等之外，您还会在每个网页上找到一个<div> 。在CSS文件中，将html元素的背景色设置为蓝色。在div上，设置宽度和高度的值以及红色的背景色。

您希望在加载页面时看到什么？

希望您很快就可以看到一张蓝屏的画面，除了一块红色，它具有为div的宽度和高度设置的尺寸。红色方框可能在页面的左上方，除非您让自己的想象力有些疯狂，并给它更多CSS来显示在其他地方。

您可能在想“那是什么，那是显而易见的”，但可能不是那么明显的是为什么您在蓝色背景上看到一个红色块。为什么在html元素顶部看到div？原因是因为两者都遵循堆叠顺序规则。

在这个简单示例的情况下，规则说正常流（div）中的后代块位于比根元素（html元素）的背景和边界更高的级别上。您会在顶部看到div，因为它处于较高的堆叠级别。

尽管上面的示例仅包含两级堆栈，但是每个堆栈上下文上有七个可能的级 ，下面列出。

背景和边界 -构成堆叠上下文的元素的边界。堆栈中的最低级别。
负Z索引 -具有负Z索引的子元素的堆叠上下文。
块级框 -流入非内联级非定位后代。
浮动框 -未定位的浮动
内联框 —流入内联级别的未定位后代。
Z索引：0-定位的元素。这些形成新的堆叠上下文。
正Z索引 -定位的元素。堆栈中的最高级别。

这七个级别构成了堆叠顺序规则。第七层的元素将显示在（靠近查看者的位置）上方，高于第一层到第六层的元素。第五层的元素显示在第二层的元素上方。一个要素……嗯，你就明白了。

我第一次遇到上面的堆叠顺序规则时，有几件事对我很重要。如果仅查看级别2，级别6和级别7（提到z-index的级别），它就可以满足您对z-index的假设。正z索引的水平高于0 z索引的水平，0 z索引的水平高于负z索引的水平。不过，这可能是我们大多数人停止考虑所有这些堆叠层的地方。

在遵循这些规则之前，我会假设其他所有内容都等于z-index为0。显然并非如此。实际上，大多数事物都位于z-index = 0水平以下的水平。

同样有趣的是，未定位的元素位于四个不同的堆叠级别。当您考虑它时，这是有道理的。如果所有未定位的元素都处于相同的堆叠级别，则在div（块级别框）的顶部看不到文本（内联框）。

全部放在一起

我已经提到过几次创建新的堆栈上下文。当您将除auto以外的z-index值分配给元素时，您将创建一个独立于其他堆栈上下文的新堆栈上下文。

让我们再次将表视为堆栈上下文。以前，我们有一张桌子，桌子上有四个街区，一盘玻璃和一个果盘。想象一下，我们介绍的第二张桌子也有四个相同大小的块，顶部有一块玻璃，但没有果盘。

您希望表一中的水果盘是房间中的最高物品。它位于最高级别（z索引最大）。但是，如果我们将表一及其上的所有内容移至地下室，会发生什么？该水果盘现在将低于表2的所有内容，因为表1本身已移至表2下方的位置。

网页上的定位元素也会发生相同的情况。考虑下面的标记和样式。 div.two显示在div.four之上还是之下？

HTML：

<div class="one">
  <div class="two"></div>
  <div class="three"></div>
</div>
<div class="four"></div>

CSS：

div {
  width: 200px;
  height: 200px;
  padding: 20px;
}

.one, .two, .three, .four {
  position: absolute;
}
 
.one {
  background: #f00;
  outline: 5px solid #000;
  top: 100px;
  left: 200px;
  z-index: 10;
}
 
.two {
  background: #0f0;
  outline: 5px solid #000;
  top: 50px;
  left: 75px;
  z-index: 100;
}

.three {
  background: #0ff;
  outline: 5px solid #000;
  top: 125px;
  left: 25px;
  z-index: 150;
}

.four {
  background: #00f;
  outline: 5px solid #ff0;
  top: 200px;
  left: 350px;
  z-index: 50;
}

即使div.two的z索引（100）较大，它实际上仍位于页面上div.four的以下（z-index = 50）。您可以在下图中看到以上代码的结果。黑色和黄色边框显示每个元素所在的不同堆叠上下文。

由于div.two包含在div.one中，因此其z-index相对于div.one的堆栈。实际上，我们真正拥有的是：

.one — z-index = 10
.two — z-index = 10.100
.three — z-index = 10.150
.four — z-index = 50

我们所做的是将div.one及其包含的所有内容移动到div.four 。无论我们在div.one内部的元素的z-index属性上设置什么值，它们都将始终显示在div.four 。

如果您像我一样，在使用z-index时可能会使您绊倒一两次。希望这些示例有助于弄清为什么具有较高z-index的元素有时最终显示在具有较低z-index的另一个元素后面。

结论

第一次遇到它时，z-index属性似乎是一个非常简单的属性。值代表一个进出屏幕的轴上的位置，仅此而已。

对z-index的更深入了解表明，幕后还有更多事情要做。有堆栈上下文，堆栈级别和规则，可确定哪个元素按堆栈顺序显示更高或更低。

定位的元素可以创建新的堆叠上下文，并且整个堆叠级别将显示在另一个堆叠上下文中的所有级别之上或之下。

翻译自: https://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892

z-index属性

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
z-index属性_您可能不知道的Z-Index属性

CSS中的z-index属性看起来很简单，但是如果您真的想了解它的工作原理，那么可以从表面发现很多东西。在本教程中，我们将通过查看堆栈上下文和一些实际示例来阐明z-index的内部工作原理。 CSS为框的布局提供了三种不同的定位方案：正常文件流漂浮绝对定位最后一个从正常流程中完全删除了一个元素，并依靠开发人员告诉该元素在哪里显示。您可以给它提供top，...
复制链接

扫一扫